Backdrop Blur

Blur backdrop

Syntax

visual="backdrop-blur:[value]"

Values

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

Examples

<div visual="backdrop-blur:medium bg:[rgba(255,255,255,0.5)]">Frosted glass</div>

Preview

Backdrop Blur

visual="backdrop-blur:medium" - Creates a frosted glass effect on content behind the element

Frosted Glass

View Code

<div layout="flex:center" space="p:large" visual="bg-image:gradient-to-br from:blue-500 to:violet-500 rounded:medium">
  <div space="p:medium" visual="backdrop-blur:medium bg:[rgba(255,255,255,0.2)] rounded:small">
    <span visual="text:white">Frosted Glass</span>
  </div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

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