Tailwind CSS

Filters & Backdrop Filters

15 min Lesson 17 of 35

Filters & Backdrop Filters in Tailwind CSS

Filters apply visual effects like blur, brightness, contrast, and more to elements. Backdrop filters apply these same effects to the area behind an element, creating popular effects like frosted glass. Tailwind provides comprehensive utilities for both standard filters and backdrop filters.

Understanding Filters

CSS filters modify the rendering of an element or its background. Standard filters affect the element itself and its contents, while backdrop filters affect only what's visible behind the element. Both can be combined to create sophisticated visual effects without images.

Blur Filters

Blur filters create a Gaussian blur effect. Tailwind provides blur utilities from subtle to extreme blurring.

Blur Utilities

<!-- Standard blur levels -->
<div class="blur-none">No blur (default)</div>
<div class="blur-sm">Small blur (4px)</div>
<div class="blur">Medium blur (8px)</div>
<div class="blur-md">Medium-large blur (12px)</div>
<div class="blur-lg">Large blur (16px)</div>
<div class="blur-xl">Extra large blur (24px)</div>
<div class="blur-2xl">2XL blur (40px)</div>
<div class="blur-3xl">3XL blur (64px)</div>

<!-- Blur on hover -->
<img src="image.jpg"
     class="hover:blur-sm transition-all duration-300"
     alt="Blurs on hover">

Practical Blur Examples

<!-- Loading/skeleton state -->
<div class="blur-lg animate-pulse bg-gray-200 h-64 w-full rounded-lg">
  Loading content...
</div>

<!-- Privacy blur for sensitive content -->
<div class="relative">
  <img src="sensitive.jpg" class="blur-2xl" alt="Sensitive content">
  <button class="absolute inset-0 m-auto h-12
                 bg-white text-gray-900 px-6 py-3 rounded-lg">
    Click to reveal
  </button>
</div>

<!-- Focus effect - blur background on modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-md
            flex items-center justify-center">
  <div class="bg-white rounded-xl p-8 max-w-lg">
    Modal content (background is blurred)
  </div>
</div>

<!-- Image gallery with hover blur -->
<div class="grid grid-cols-3 gap-4">
  <img src="1.jpg" class="hover:blur-0 blur-sm transition-all" alt="1">
  <img src="2.jpg" class="hover:blur-0 blur-sm transition-all" alt="2">
  <img src="3.jpg" class="hover:blur-0 blur-sm transition-all" alt="3">
</div>

Brightness Filters

Brightness filters adjust the lightness or darkness of an element. Values below 100 darken, values above 100 brighten.

Brightness Utilities

<!-- Brightness levels -->
<div class="brightness-0">Completely black (0%)</div>
<div class="brightness-50">Dark (50%)</div>
<div class="brightness-75">Slightly dark (75%)</div>
<div class="brightness-90">Slightly dim (90%)</div>
<div class="brightness-95">Very slightly dim (95%)</div>
<div class="brightness-100">Normal brightness (100%)</div>
<div class="brightness-105">Slightly bright (105%)</div>
<div class="brightness-110">Bright (110%)</div>
<div class="brightness-125">Very bright (125%)</div>
<div class="brightness-150">Extremely bright (150%)</div>
<div class="brightness-200">Maximum brightness (200%)</div>

Brightness Effect Examples

<!-- Image hover brightening -->
<div class="overflow-hidden rounded-lg">
  <img src="dark-image.jpg"
       class="brightness-75 hover:brightness-100
              transition-all duration-300"
       alt="Brightens on hover">
</div>

<!-- Dark mode image adjustment -->
<img src="photo.jpg"
     class="brightness-100 dark:brightness-90"
     alt="Adjusted for dark mode">

<!-- Button hover effect -->
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg
              hover:brightness-110 transition-all duration-200">
  Hover me
</button>

<!-- Disabled state -->
<button disabled
        class="bg-gray-600 text-white px-6 py-3 rounded-lg
               brightness-50 cursor-not-allowed">
  Disabled
</button>

<!-- Video thumbnail overlay -->
<div class="relative group">
  <img src="thumbnail.jpg"
       class="brightness-75 group-hover:brightness-50
              transition-all duration-300"
       alt="Video thumbnail">
  <div class="absolute inset-0 flex items-center justify-center">
    <button class="bg-white bg-opacity-90 rounded-full p-4
                   opacity-0 group-hover:opacity-100
                   transition-opacity duration-300">
      ▶ Play
    </button>
  </div>
</div>

Contrast Filters

Contrast filters adjust the difference between light and dark areas. Higher values increase contrast, lower values reduce it.

Contrast Utilities

<!-- Contrast levels -->
<div class="contrast-0">No contrast (gray) (0%)</div>
<div class="contrast-50">Low contrast (50%)</div>
<div class="contrast-75">Reduced contrast (75%)</div>
<div class="contrast-100">Normal contrast (100%)</div>
<div class="contrast-125">Enhanced contrast (125%)</div>
<div class="contrast-150">High contrast (150%)</div>
<div class="contrast-200">Maximum contrast (200%)</div>

<!-- Combined with other filters -->
<img src="photo.jpg"
     class="contrast-125 brightness-110 saturate-150"
     alt="Enhanced photo">

Contrast Effect Examples

<!-- Text readability enhancement -->
<div class="bg-cover bg-center relative"
     style="background-image: url('bg.jpg')">
  <div class="absolute inset-0 contrast-50 brightness-75"></div>
  <div class="relative z-10 p-8 text-white">
    <h2>Readable text over busy background</h2>
  </div>
</div>

<!-- Image gallery filters -->
<div class="grid grid-cols-3 gap-4">
  <img src="1.jpg" class="contrast-100" alt="Normal">
  <img src="1.jpg" class="contrast-150" alt="High contrast">
  <img src="1.jpg" class="contrast-50" alt="Low contrast">
</div>

<!-- Hover effect for dramatic images -->
<img src="portrait.jpg"
     class="contrast-100 hover:contrast-125
            transition-all duration-500"
     alt="Portrait with hover effect">

Grayscale, Sepia, and Color Filters

These filters adjust color properties, from removing color entirely to adding vintage tones.

Color Filter Utilities

<!-- Grayscale (removes color) -->
<div class="grayscale-0">Full color (0%)</div>
<div class="grayscale">Completely grayscale (100%)</div>

<!-- Sepia (vintage brown tone) -->
<div class="sepia-0">No sepia (0%)</div>
<div class="sepia">Full sepia (100%)</div>

<!-- Invert colors -->
<div class="invert-0">Normal colors (0%)</div>
<div class="invert">Inverted colors (100%)</div>

<!-- Hue rotation (color shift) -->
<div class="hue-rotate-0">Original hue (0deg)</div>
<div class="hue-rotate-15">15 degree shift</div>
<div class="hue-rotate-30">30 degree shift</div>
<div class="hue-rotate-60">60 degree shift</div>
<div class="hue-rotate-90">90 degree shift</div>
<div class="hue-rotate-180">180 degree shift</div>
<div class="-hue-rotate-60">-60 degree shift</div>

Color Filter Examples

<!-- Photo gallery with filter options -->
<div class="space-y-4">
  <img src="photo.jpg" class="w-full" alt="Original">
  <img src="photo.jpg" class="w-full grayscale" alt="Grayscale">
  <img src="photo.jpg" class="w-full sepia" alt="Sepia">
  <img src="photo.jpg" class="w-full hue-rotate-90" alt="Hue shifted">
</div>

<!-- Hover effect revealing color -->
<img src="colorful.jpg"
     class="grayscale hover:grayscale-0
            transition-all duration-500"
     alt="Reveals color on hover">

<!-- Dark mode icon inversion -->
<img src="logo-dark.svg"
     class="dark:invert"
     alt="Logo (inverted in dark mode)">

<!-- Animated hue rotation -->
<div class="animate-spin-slow hue-rotate-0
            hover:hue-rotate-180 transition-all duration-1000">
  <img src="colorful-icon.svg" alt="Color-shifting icon">
</div>

<!-- Vintage photo effect -->
<img src="modern-photo.jpg"
     class="sepia contrast-125 brightness-110"
     alt="Vintage-style photo">

Hue Rotation Color Wheel

Hue rotation shifts colors around the color wheel: red → orange → yellow → green → cyan → blue → magenta → red. A 180-degree rotation converts colors to their opposites (red ↔ cyan, blue ↔ yellow, green ↔ magenta).

Saturation Filters

Saturation controls color intensity. Lower values make colors more muted, higher values make them more vibrant.

Saturation Utilities

<!-- Saturation levels -->
<div class="saturate-0">No saturation (grayscale) (0%)</div>
<div class="saturate-50">Low saturation (50%)</div>
<div class="saturate-100">Normal saturation (100%)</div>
<div class="saturate-150">Enhanced saturation (150%)</div>
<div class="saturate-200">Maximum saturation (200%)</div>

<!-- Creating vibrant images -->
<img src="landscape.jpg"
     class="saturate-150 contrast-110"
     alt="Vibrant landscape">

<!-- Muted, professional look -->
<img src="portrait.jpg"
     class="saturate-75"
     alt="Professional portrait">

Saturation Effect Examples

<!-- Product image enhancement -->
<div class="product-gallery">
  <img src="product.jpg"
       class="saturate-125 brightness-105 contrast-105
              hover:saturate-150 transition-all duration-300"
       alt="Enhanced product photo">
</div>

<!-- Inactive/disabled state -->
<button disabled
        class="saturate-0 opacity-50 cursor-not-allowed">
  <img src="icon.svg" alt="Disabled icon">
  Unavailable
</button>

<!-- Mood-based filtering -->
<div class="grid grid-cols-3 gap-4">
  <div class="saturate-50 brightness-90">
    <img src="calm.jpg" alt="Calm mood">
  </div>
  <div class="saturate-150 contrast-110">
    <img src="energetic.jpg" alt="Energetic mood">
  </div>
  <div class="saturate-0 contrast-125">
    <img src="serious.jpg" alt="Serious mood">
  </div>
</div>

Drop Shadow Filters

Drop shadow creates a shadow effect for the element's shape (unlike box-shadow which shadows the box). Particularly useful for non-rectangular elements like icons or irregular shapes.

Drop Shadow Utilities

<!-- Drop shadow levels -->
<div class="drop-shadow-none">No shadow</div>
<div class="drop-shadow-sm">Small shadow</div>
<div class="drop-shadow">Medium shadow (default)</div>
<div class="drop-shadow-md">Medium-large shadow</div>
<div class="drop-shadow-lg">Large shadow</div>
<div class="drop-shadow-xl">Extra large shadow</div>
<div class="drop-shadow-2xl">2XL shadow</div>

<!-- Drop shadow on SVG icons -->
<svg class="w-12 h-12 text-blue-600 drop-shadow-lg">
  <path d="..."></path>
</svg>

Drop Shadow Examples

<!-- Icon with elevation -->
<button class="p-4 bg-transparent hover:drop-shadow-xl
              transition-all duration-200">
  <svg class="w-8 h-8 text-blue-600">
    <path d="..."></path>
  </svg>
</button>

<!-- Text with shadow (better than text-shadow for shapes) -->
<h1 class="text-6xl font-bold text-white drop-shadow-2xl">
  Hero Title
</h1>

<!-- Image cutout effect -->
<img src="transparent-product.png"
     class="drop-shadow-2xl"
     alt="Product with shadow">

<!-- Hover lift effect -->
<div class="bg-white rounded-lg p-6
            drop-shadow-md hover:drop-shadow-2xl
            transform hover:-translate-y-1
            transition-all duration-300">
  Card lifts on hover
</div>

Backdrop Filters

Backdrop filters apply effects to the area behind an element, creating frosted glass and other transparency effects. Extremely useful for overlays, cards, and navigation bars.

Backdrop Blur Utilities

<!-- Backdrop blur levels -->
<div class="backdrop-blur-none">No backdrop blur</div>
<div class="backdrop-blur-sm">Small backdrop blur (4px)</div>
<div class="backdrop-blur">Medium backdrop blur (8px)</div>
<div class="backdrop-blur-md">Medium-large backdrop blur (12px)</div>
<div class="backdrop-blur-lg">Large backdrop blur (16px)</div>
<div class="backdrop-blur-xl">Extra large backdrop blur (24px)</div>
<div class="backdrop-blur-2xl">2XL backdrop blur (40px)</div>
<div class="backdrop-blur-3xl">3XL backdrop blur (64px)</div>

Frosted Glass Effect

<!-- Classic frosted glass card -->
<div class="relative h-screen bg-cover bg-center"
     style="background-image: url('background.jpg')">
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg
                rounded-2xl p-8 shadow-2xl border border-white border-opacity-30">
      <h2 class="text-2xl font-bold text-white mb-4">
        Frosted Glass Card
      </h2>
      <p class="text-white text-opacity-90">
        Content is readable over blurred background
      </p>
    </div>
  </div>
</div>

<!-- macOS-style navigation bar -->
<nav class="fixed top-0 left-0 right-0 z-50
            bg-white bg-opacity-70 backdrop-blur-md
            border-b border-gray-200 border-opacity-50">
  <div class="container mx-auto px-4 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold">Logo</div>
      <nav class="space-x-6">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </div>
  </div>
</nav>

<!-- iOS-style bottom sheet -->
<div class="fixed bottom-0 left-0 right-0
            bg-white bg-opacity-80 backdrop-blur-xl
            rounded-t-3xl p-6 shadow-2xl">
  <div class="w-12 h-1 bg-gray-300 rounded-full mx-auto mb-6"></div>
  <h3 class="text-xl font-bold mb-4">Sheet Title</h3>
  <p>Sheet content with blurred background</p>
</div>

Backdrop Brightness, Contrast, and Other Filters

<!-- Backdrop brightness -->
<div class="backdrop-brightness-50">Darkens background</div>
<div class="backdrop-brightness-125">Brightens background</div>

<!-- Backdrop contrast -->
<div class="backdrop-contrast-125">Increases background contrast</div>

<!-- Backdrop grayscale -->
<div class="backdrop-grayscale">Grayscale background</div>

<!-- Backdrop hue rotation -->
<div class="backdrop-hue-rotate-90">Color-shifted background</div>

<!-- Backdrop invert -->
<div class="backdrop-invert">Inverted background colors</div>

<!-- Backdrop saturate -->
<div class="backdrop-saturate-150">Enhanced background saturation</div>

<!-- Backdrop sepia -->
<div class="backdrop-sepia">Vintage background tone</div>

Advanced Backdrop Filter Combinations

<!-- Dark glassmorphism -->
<div class="bg-black bg-opacity-30 backdrop-blur-xl
            backdrop-saturate-150 backdrop-brightness-125
            border border-white border-opacity-10
            rounded-2xl p-8">
  Dark glass effect
</div>

<!-- Colorful glass card -->
<div class="bg-gradient-to-br from-purple-500 to-pink-500
            bg-opacity-20 backdrop-blur-md backdrop-saturate-200
            rounded-3xl p-6 border border-white border-opacity-20">
  Vibrant glass effect
</div>

<!-- Modal overlay with darkened blur -->
<div class="fixed inset-0 z-50
            bg-black bg-opacity-20 backdrop-blur-sm backdrop-brightness-75
            flex items-center justify-center">
  <div class="bg-white rounded-xl p-8 max-w-lg">
    Modal content
  </div>
</div>

<!-- Notification toast -->
<div class="fixed top-4 right-4
            bg-white bg-opacity-90 backdrop-blur-lg
            rounded-lg p-4 shadow-xl border border-gray-200 border-opacity-50
            max-w-sm">
  <h4 class="font-bold">Notification</h4>
  <p class="text-sm text-gray-600">Your action was successful</p>
</div>

Browser Support & Performance

Backdrop filters have good modern browser support but can be performance-intensive, especially on mobile devices. Use them sparingly and test performance. Consider providing fallbacks for older browsers using @supports or by combining with solid background colors.

Exercise 1: Photo Filter App

Create an interactive photo filter application:

Display a large image at the top
Show 6 filter presets (Normal, Grayscale, Sepia, Vibrant, Vintage, Dramatic)
Each preset applies a combination of filters (saturation, contrast, brightness, etc.)
Clicking a preset applies that filter combination to the image
Add smooth transitions between filters
Include reset button to return to original

Exercise 2: Glassmorphism Navigation

Build a modern navigation bar with glass morphism:

Fixed position at top with backdrop-blur
Semi-transparent white background (bg-opacity-70 or similar)
Border with subtle opacity
Logo on left, navigation links on right
Hover effects on links with backdrop filter changes
Should work beautifully over any background image/video

Exercise 3: Modal with Backdrop Effects

Create a modal dialog system with advanced backdrop effects:

Overlay that blurs and darkens the background
Modal card with frosted glass effect
Backdrop filters: blur-lg, brightness-75, saturate-150
Close button that reverses all effects smoothly
Ensure modal content remains sharp while background blurs
Test with different background images

Combining Filters

Multiple Filter Combinations

<!-- Instagram-style filters -->
<!-- Clarendon effect -->
<img src="photo.jpg"
     class="contrast-125 saturate-125 brightness-105"
     alt="Clarendon filter">

<!-- Gingham effect -->
<img src="photo.jpg"
     class="brightness-105 hue-rotate-350"
     alt="Gingham filter">

<!-- Moon effect -->
<img src="photo.jpg"
     class="grayscale brightness-110 contrast-110"
     alt="Moon filter">

<!-- Lark effect -->
<img src="photo.jpg"
     class="contrast-90 saturate-110 brightness-105"
     alt="Lark filter">

<!-- X-Pro II effect -->
<img src="photo.jpg"
     class="sepia contrast-125 brightness-90"
     alt="X-Pro II filter">

Best Practices for Filters

Use transitions with filter changes for smooth effects
Test filter combinations to avoid over-processing
Backdrop filters work best with semi-transparent backgrounds
Combine filters thoughtfully - too many can degrade quality
Consider accessibility - ensure text remains readable
Use drop-shadow for irregular shapes instead of box-shadow
Test performance on mobile devices when using backdrop filters

Summary

Tailwind's filter utilities provide powerful visual effects without images or complex CSS:

Blur: Gaussian blur from subtle to extreme (blur-{size})
Brightness: Lighten or darken elements (brightness-{n})
Contrast: Adjust light/dark difference (contrast-{n})
Saturation: Control color intensity (saturate-{n})
Grayscale: Remove color completely (grayscale)
Sepia: Add vintage brown tone (sepia)
Hue Rotate: Shift colors around wheel (hue-rotate-{deg})
Invert: Reverse all colors (invert)
Drop Shadow: Shadow following element shape (drop-shadow-{size})
Backdrop Filters: All filters applied to background (backdrop-{filter})

Filters are essential for modern UI design, enabling photo effects, glassmorphism, focus states, and creative visual treatments. When combined with Tailwind's transition utilities, they create sophisticated, performant effects that enhance user experience.