Backdrop Opacity

Set backdrop opacity

Syntax

visual="backdrop-opacity:[value]"

Values

Value	CSS Output	Description
0	backdrop-filter: opacity(0)	Transparent
50	backdrop-filter: opacity(0.5)	50% opacity
100	backdrop-filter: opacity(1)	Fully opaque

Examples

<div visual="backdrop-opacity:50">Semi-transparent backdrop</div>

Preview

Backdrop Opacity

visual="backdrop-opacity:50" - Control backdrop transparency

0

50

100

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">0</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">50</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">100</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

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