Backdrop Sepia
Apply sepia to backdrop
Syntax
visual="backdrop-sepia:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
none | backdrop-filter: sepia(0%) | No sepia |
partial | backdrop-filter: sepia(50%) | 50% sepia |
full | backdrop-filter: sepia(100%) | Full sepia |
Examples
html
<div visual="backdrop-sepia:full">Vintage backdrop</div>Preview
Backdrop Sepia
visual="backdrop-sepia:full" - Apply vintage sepia tone to the backdrop
Original
Sepia
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
<div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 filter-sepia:full rounded:small text:white">Sepia</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="backdrop:[custom-value]">Custom</div>