Backdrop Brightness

Adjust backdrop brightness

Syntax

visual="backdrop-brightness:[value]"

Values

Value	CSS Output	Description
dim	backdrop-filter: brightness(0.5)	50% brightness
dark	backdrop-filter: brightness(0.75)	75% brightness
normal	backdrop-filter: brightness(1)	Normal brightness
bright	backdrop-filter: brightness(1.25)	125% brightness
vivid	backdrop-filter: brightness(1.5)	150% brightness

Examples

<div visual="backdrop-brightness:dark">Darkened backdrop</div>

Preview

Backdrop Brightness

visual="backdrop-brightness:dark" - Dim or brighten the backdrop behind an overlay

dim (50%)

normal

bright (150%)

View Code

<div layout="flex" space="g:medium p:medium" visual="bg-image:gradient-to-br from:orange-500 to:red-500 rounded:medium">
  <div space="p:small" visual="backdrop-brightness:dim rounded:small text:white">dim (50%)</div>
  <div space="p:small" visual="backdrop-brightness:normal rounded:small text:white">normal</div>
  <div space="p:small" visual="backdrop-brightness:vivid rounded:small text:white">bright (150%)</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

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