Filters & Backdrop Filters

Filters & Backdrop Filters

Filters visually change an element (or what's behind it) without affecting layout.

Filters

• blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl, blur-none.
• brightness-50 … brightness-200.
• contrast-50 … contrast-200.
• grayscale, grayscale-0.
• hue-rotate-15, hue-rotate-180.
• invert, invert-0.
• saturate-50 … saturate-200.
• sepia, sepia-0.
• drop-shadow-sm … drop-shadow-2xl.

<img class="grayscale hover:grayscale-0 transition" src="..." alt="..." />

Backdrop filters

Filter what's behind an element (great for glassmorphism):

<div class="bg-white/10 backdrop-blur-md">
  Glass effect
</div>

Every filter has a backdrop- variant: backdrop-blur, backdrop-brightness, backdrop-contrast, backdrop-grayscale, backdrop-hue-rotate, backdrop-invert, backdrop-opacity, backdrop-saturate, backdrop-sepia.

Combining filters

Filters compose via CSS variables, so stack them:

<div class="blur-sm grayscale">...</div>

TL;DR

• blur-, grayscale, brightness-, saturate-, drop-shadow-.
• backdrop-blur-md blurs what's behind.
• Filters combine freely and don't affect layout.
• Perfect for hover effects and glassmorphism.