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