Effects

filter

Applying graphic effects to an element.

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

Examples

Use filter:* with functions such as blur(...), brightness(...), and drop-shadow(...) to apply CSS filters.

<img class="filter:blur(4px) filter:brightness(.8)" src="..." alt="" />

Generated CSS

@layer utilities {    .filter\:blur\(4px\) {        filter: blur(4px)    }    .filter\:brightness\(\.8\) {        filter: brightness(0.8)    }}

Use filter:drop-shadow(...) when the shadow should follow the alpha shape of an image or SVG.

<img class="filter:drop-shadow(0|2px|4px|black/.2)" src="..." alt="" />

Use box-shadow for the element box instead.

Use filter:none to remove filters at a breakpoint or state.

<img class="filter:none@print" src="..." alt="" />

Apply styles based on different states using selectors and conditional queries.

<div class="filter:none filter:blur(4px):hover filter:none@print">...</div>

Filters can be expensive on large areas; use them where the visual benefit is clear.

Adding light and dark shadow effects around an element.

Setting how an element's content should blend with its parent background.