Syntax

Filter

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 based on different states using selectors and conditional queries.

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