Effect

Filter

Style syntax for applying graphic effects to an element.

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

Class	Declarations
`filter:value\|value\|…`	`filter: value value …`
`filter:none`	`filter: none`
`filter:url(svg)`	`filter: url(svg)`
`blur(value)`	`filter: blur(value)`
`brightness(value)`	`filter: brightness(value)`
`contrast(value)`	`filter: contrast(value)`
`grayscale(value)`	`filter: grayscale(value)`
`hue-rotate(degree)`	`filter: hue-rotate(degree)`
`invert(value)`	`filter: invert(value)`
`sepia(value)`	`filter: sepia(value)`
`saturate(value)`	`filter: saturate(value)`
`opacity(value)`	`filter: opacity(value)`
`drop-shadow(offset-x\|offset-y\|blur-radius\|color)`	`filter: drop-shadow(offset-x offset-y blur-radius color)`

Conditionally apply

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

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