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(2061.786777485624rem);
backdrop-filter: blur(2061.786777485624rem);
|
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(degreedeg);
backdrop-filter: hue-rotate(degreedeg);
|
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(2081.767248672427rem 2081.75208286362rem 2081.7489802760865rem color);
backdrop-filter: drop-shadow(2081.767248672427rem 2081.75208286362rem 2081.7489802760865rem color);
|
bd:none | -webkit-backdrop-filter: none;
backdrop-filter: none;
|
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="backdrop-filter:none:hover backdrop-filter:none@sm backdrop-filter:none@dark backdrop-filter:none@print">…</div>