Filters

Apply CSS filters as utilities for image and element effects, and combine them with hover transitions.

4 min read Level 2/5 #tailwind#effects

What you'll learn

Use blur, brightness, contrast, grayscale, and saturate
Combine multiple filters on one element
Use hover transitions for filter reveals

CSS filters are graphics-card-accelerated effects — blur, color shifts, drops. Tailwind exposes each as its own scale.

Common Filters

<img class="blur-sm" />
<img class="brightness-110 contrast-125" />
<img class="grayscale" />
<img class="saturate-150" />

Combining Filters

Filters stack — apply several on one element and they compose:

<img class="grayscale blur-sm hover:grayscale-0 hover:blur-none transition" />

This is the classic “desaturated until you hover” gallery thumbnail. transition animates the change smoothly.

drop-shadow

drop-shadow-* is special: unlike shadow-* (a box shadow), it follows the element’s alpha channel. That makes it the right tool for shadowing transparent PNGs and SVG icons:

<img class="drop-shadow-lg" src="/logo.svg" />

Arbitrary Values

Any filter accepts an arbitrary value when the scale is too coarse:

<div class="blur-[2px] saturate-[1.3]">Fine-tuned</div>

Backdrop Filters →