Effect

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
`backdrop-filter:value` `/` `bd:value`	`backdrop-filter: value; -webkit-backdrop-filter: value`
`backdrop-filter:value\|…` `/` `bd:value\|…`	`backdrop-filter: value …; -webkit-backdrop-filter: value …`
`bd:none`	`backdrop-filter: none; -webkit-backdrop-filter: none`
`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 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)`

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="backdrop-filter:none:hover backdrop-filter:none@sm backdrop-filter:none@dark backdrop-filter:none@print">…</div>