Filter Blur

Apply blur filter

Syntax

visual="blur:[value]"

Values

Value	CSS Output	Description
none	filter: blur(0)	No blur
tiny	filter: blur(2px)	Tiny blur
small	filter: blur(4px)	Small blur
medium	filter: blur(8px)	Medium blur
big	filter: blur(12px)	Large blur
giant	filter: blur(24px)	Giant blur
vast	filter: blur(48px)	Vast blur

Examples

<div visual="blur:medium">Blurred element</div>

Preview

Blur

visual="blur:small" - Apply gaussian blur filter to an element

none

tiny

small

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small blur:none">none</div>
  <div space="p:small" visual="bg:primary text:white rounded:small blur:tiny">tiny</div>
  <div space="p:small" visual="bg:primary text:white rounded:small blur:small">small</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="filter:[custom-value]">Custom</div>