iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Filters / Blur

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwinds filter utilities are CSS filter shortcuts: blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, and drop-shadow. They are GPU-composited where possible, layer cleanly, and have a matching backdrop-* variant that filters whats BEHIND the element. Most modern UI polish (frosted glass, hover treatments, before/after demos) is two utilities.

Filters, backdrop filters, and composed effects

EXAMPLE
<!-- 1) Simple grayscale + brightness on hover -->
<img src='/photo.jpg'
     class='grayscale hover:grayscale-0 brightness-95 hover:brightness-110 transition duration-300'>

<!-- 2) Blur and saturation for a 'distant background' effect -->
<div class='absolute inset-0 -z-10 bg-[url(/hero.jpg)] bg-cover blur-md saturate-150 brightness-75'></div>

<!-- 3) Backdrop filters — for frosted-glass overlays -->
<header class='sticky top-0
                bg-white/60 backdrop-blur supports-[backdrop-filter]:bg-white/40
                border-b border-white/40'>
  Sticky frosted header
</header>

<!-- 4) Composed: invert on dark mode -->
<img src='/diagram.png' class='dark:invert dark:hue-rotate-180'>

<!-- 5) Drop-shadow (alpha-aware) vs box-shadow (rectangular) -->
<svg class='drop-shadow-xl text-blue-600 w-24 h-24'><circle cx='50' cy='50' r='40' fill='currentColor'/></svg>
<div class='shadow-xl w-24 h-24 bg-blue-600'></div>

<!-- 6) Before/after image comparison — two layers, one masked -->
<div class='relative w-96 h-64 select-none'>
  <img src='/before.jpg' class='absolute inset-0 w-full h-full object-cover grayscale'>
  <img src='/after.jpg'  class='absolute inset-0 w-full h-full object-cover
                                  [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]'>
</div>

<!-- 7) Hue rotate to recolour an SVG/icon without re-exporting -->
<svg class='text-amber-400 hue-rotate-180 w-8 h-8' viewBox='0 0 24 24' fill='currentColor'>
  <path d='M12 2 L22 22 L2 22 Z' />
</svg>

<!-- 8) backdrop-saturate + backdrop-blur for an iOS-style chip -->
<span class='inline-flex px-2 py-1 rounded-full text-xs font-medium
              bg-white/20 text-white backdrop-blur backdrop-saturate-150'>
  Now playing
</span>

<!-- 9) Arbitrary filter for one-off needs (CSS filter() syntax) -->
<img src='/avatar.jpg' class='[filter:contrast(1.15)_brightness(1.05)_blur(.5px)]'>

<!-- 10) Performance — filters on full-screen overlays can be expensive on mobile.
     Test on a mid-tier device; if it stutters, prefer a translucent solid colour
     over backdrop-blur on the largest layer. -->

Why it matters

Combine bg-white/60 + backdrop-blur + supports-[backdrop-filter]:bg-white/40 for the frosted-glass effect. The supports- variant only applies the translucent colour when the browser actually does backdrop-blur, so Safari/Chrome get the glassy look while older browsers fall back to an opaque-enough background that text remains readable.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<img class="blur-sm grayscale">
Try it Yourself »

Discussion

Loading…