Filter Invert
Invert colors
Syntax
visual="invert:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
none | filter: invert(0%) | No inversion |
partial | filter: invert(50%) | 50% inversion |
full | filter: invert(100%) | Full inversion |
Examples
html
<img visual="invert:full">Inverted colors</img>Preview
Invert Filter
visual="invert:full" - Invert element colors
none
full
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:primary text:white rounded:small">none</div>
<div space="p:small" visual="bg:primary text:white rounded:small invert:full">full</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="filter:[custom-value]">Custom</div>