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\|…`	`backdrop-filter: value …; -webkit-backdrop-filter: value …;`
`bd:url(svg)`	`backdrop-filter: url(svg); -webkit-backdrop-filter: url(svg);`
`bd:blur(value)`	`backdrop-filter: blur(value); -webkit-backdrop-filter: blur(value);`
`bd:brightness(value)`	`backdrop-filter: brightness(value); -webkit-backdrop-filter: brightness(value);`
`bd:contrast(value)`	`backdrop-filter: contrast(value); -webkit-backdrop-filter: contrast(value);`
`bd:grayscale(value)`	`backdrop-filter: grayscale(value); -webkit-backdrop-filter: grayscale(value);`
`bd:hue-rotate(degree)`	`backdrop-filter: hue-rotate(degree); -webkit-backdrop-filter: hue-rotate(degree);`
`bd:invert(value)`	`backdrop-filter: invert(value); -webkit-backdrop-filter: invert(value);`
`bd:sepia(value)`	`backdrop-filter: sepia(value); -webkit-backdrop-filter: sepia(value);`
`bd:saturate(value)`	`backdrop-filter: saturate(value); -webkit-backdrop-filter: saturate(value);`
`bd:opacity(value)`	`backdrop-filter: opacity(value); -webkit-backdrop-filter: opacity(value);`
`bd:drop-shadow(offset-x\|offset-y\|blur-radius\|color)`	`backdrop-filter: drop-shadow(offset-x offset-y blur-radius color); -webkit-backdrop-filter: drop-shadow(offset-x offset-y blur-radius color);`
`bd:none`	`backdrop-filter: none; -webkit-backdrop-filter: none;`

Conditionally apply

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>