Filter Contrast
Adjust contrast
Syntax
visual="contrast:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
low | filter: contrast(0.5) | Low contrast |
reduced | filter: contrast(0.75) | Reduced contrast |
normal | filter: contrast(1) | Normal contrast |
high | filter: contrast(1.25) | High contrast |
max | filter: contrast(1.5) | Maximum contrast |
Examples
html
<img visual="contrast:high">High contrast</img>Preview
Contrast Filter
visual="contrast:high" - Adjust element contrast
low
normal
high
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 contrast:low">low</div>
<div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
<div space="p:small" visual="bg:primary text:white rounded:small contrast:max">high</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="filter:[custom-value]">Custom</div>