Syntax
filter
Applying graphic effects to an element.
Overview
| Class | Declarations |
|---|---|
filter:`value`|`value`|`…` | filter: `value` `value` `…`;
|
filter:none | filter: none;
|
filter:url(`svg`) | filter: url(`svg`);
|
blur(`value`) | filter: blur(`value`);
|
brightness(`value`) | filter: brightness(`value`);
|
contrast(`value`) | filter: contrast(`value`);
|
grayscale(`value`) | filter: grayscale(`value`);
|
hue-rotate(`degree`) | filter: hue-rotate(`degree`);
|
invert(`value`) | filter: invert(`value`);
|
sepia(`value`) | filter: sepia(`value`);
|
saturate(`value`) | filter: saturate(`value`);
|
opacity(`value`) | filter: opacity(`value`);
|
drop-shadow(`offset-x`|`offset-y`|`blur-radius`|<color>) | filter: drop-shadow(`offset-x` `offset-y` `blur-radius` <color>);
|
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="filter:none:hover filter:none@sm filter:none@dark filter:none@print">…</div>