Syntax

backdrop-filter🚧

Style syntax for applying filter effects to the area behind an target element.

🚧This page is still under construction and some content may not be complete.

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(1861.7387169556227rem); backdrop-filter: blur(1861.7387169556227rem);`
`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(1879.4605707453677rem 1879.5134894488344rem 1879.4733770739715rem color); backdrop-filter: drop-shadow(1879.4605707453677rem 1879.5134894488344rem 1879.4733770739715rem 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>