Filter Intent Overview
Filter intent contains element's filter (including backdrop-filter) related
CSS properties.
Utilities available in @filter intent are listed below.
filter
| Utility | Description | Documentation |
|---|---|---|
blur-* | Apply blur filter effect to elements. | blur |
bright-* | Adjust brightness filter effects. | bright |
contrast-* | Control contrast filter effect. | contrast |
gray-* | Apply grayscale filter to elements. | gray |
hue-* | Adjust hue rotation filter on elements. | hue |
invert-* | Invert colors with filter effect. | invert |
opacity-* | Control element opacity filter effect. | opacity |
preset-* | Use preset, filter combinations for common effects. | preset |
saturate-* | Adjust saturation filter on element colors. | saturate |
sepia-* | Apply sepia tone filter effect to elements. | sepia |
shadow-* | Add shadow (drop-shadow) filter effects to elements. | shadow |
backdrop-filter
| Utility | Description | Documentation |
|---|---|---|
backdrop-* | Apply backdrop filter effects to elements. | backdrop |
backdrop-blur-* | Apply backdrop blur filter effect to elements. | backdrop blur |
backdrop-bright-* | Adjust backdrop brightness filter effects. | backdrop bright |
backdrop-contrast-* | Control backdrop contrast filter effect. | backdrop contrast |
backdrop-gray-* | Apply backdrop grayscale filter to elements. | backdrop gray |
backdrop-hue-* | Adjust backdrop hue rotation filter effects. | backdrop hue |
backdrop-invert-* | Invert backdrop colors with filter effect. | backdrop invert |
backdrop-opacity-* | Control backdrop opacity filter effect. | backdrop opacity |
backdrop-saturate-* | Adjust backdrop saturation filter values. | backdrop saturate |
backdrop-sepia-* | Apply backdrop sepia tone filter effect. | backdrop sepia |
backdrop-shadow-* | Add backdrop shadow (drop-shadow) filter effects. | backdrop shadow |