CSS filters enable stunning visual effects without image editing software. Tailwind provides comprehensive filter utilities for blur, brightness, contrast, saturation, and more. You can also use backdrop filters to blur content behind elements, creating frosted glass effects. In this lesson, you'll master filters to create beautiful, polished visual effects.
Blur Filter
Blur creates a soft, out-of-focus effect on elements:
Blur Intensities
HTML
<!-- No blur -->
<img src="image.jpg" alt="Sharp" class="blur-none">
<!-- Small blur -->
<img src="image.jpg" alt="Slightly blurred" class="blur-sm">
<!-- Default blur -->
<img src="image.jpg" alt="Blurred" class="blur">
<!-- Medium blur -->
<img src="image.jpg" alt="Medium blur" class="blur-md">
<!-- Large blur -->
<img src="image.jpg" alt="Large blur" class="blur-lg">
<!-- Extra large blur -->
<img src="image.jpg" alt="Extra large blur" class="blur-xl">
<!-- 2XL blur -->
<img src="image.jpg" alt="Very blurred" class="blur-2xl">
<!-- 3XL blur -->
<img src="image.jpg" alt="Maximum blur" class="blur-3xl">
<!-- Blur on hover -->
<img
src="image.jpg"
alt="Hover to blur"
class="hover:blur-md transition-all duration-300"
>Practical Blur Uses
HTML
<!-- Loading state with blur -->
<div class="relative">
<img
src="image.jpg"
alt="Content"
class="blur-lg"
>
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white px-6 py-3 rounded-lg shadow-lg">
<p class="font-semibold">Loading...</p>
</div>
</div>
</div>
<!-- Sensitive content blur (reveal on hover) -->
<div class="group relative">
<img
src="sensitive.jpg"
alt="Sensitive"
class="blur-xl group-hover:blur-none transition-all duration-300"
>
<div class="absolute inset-0 flex items-center justify-center group-hover:opacity-0 transition-opacity">
<button class="bg-white px-4 py-2 rounded-lg shadow">
Click to reveal
</button>
</div>
</div>
<!-- Background image with blur -->
<div class="relative h-64">
<img
src="background.jpg"
alt="Background"
class="absolute inset-0 w-full h-full object-cover blur-sm"
>
<div class="relative z-10 flex items-center justify-center h-full">
<h2 class="text-4xl font-bold text-white">Content on Blurred Background</h2>
</div>
</div>💡 Blur Performance
Blur is GPU-accelerated but can impact performance on complex layouts. Use sparingly and test on lower-end devices.
Backdrop Blur
Backdrop blur creates frosted glass effects by blurring content behind an element:
Backdrop Blur Intensities
HTML
<!-- No backdrop blur -->
<div class="backdrop-blur-none bg-white/30"></div>
<!-- Small backdrop blur -->
<div class="backdrop-blur-sm bg-white/30"></div>
<!-- Default backdrop blur -->
<div class="backdrop-blur bg-white/30"></div>
<!-- Medium backdrop blur -->
<div class="backdrop-blur-md bg-white/30"></div>
<!-- Large backdrop blur -->
<div class="backdrop-blur-lg bg-white/30"></div>
<!-- Extra large backdrop blur -->
<div class="backdrop-blur-xl bg-white/30"></div>
<!-- 2XL backdrop blur -->
<div class="backdrop-blur-2xl bg-white/30"></div>
<!-- 3XL backdrop blur -->
<div class="backdrop-blur-3xl bg-white/30"></div>Frosted Glass Effects
HTML
<!-- Frosted glass card -->
<div class="relative h-96 overflow-hidden">
<!-- Background image -->
<img
src="background.jpg"
alt="Background"
class="absolute inset-0 w-full h-full object-cover"
>
<!-- Frosted glass overlay -->
<div class="absolute inset-0 flex items-center justify-center p-8">
<div class="backdrop-blur-lg bg-white/30 rounded-2xl shadow-xl p-8 border border-white/20">
<h3 class="text-2xl font-bold text-gray-900 mb-4">
Frosted Glass Card
</h3>
<p class="text-gray-700">
The background behind this card is blurred, creating a beautiful frosted glass effect.
</p>
</div>
</div>
</div>
<!-- Navigation bar with backdrop blur -->
<nav class="sticky top-0 backdrop-blur-md bg-white/80 border-b border-gray-200/50 z-50">
<div class="max-w-7xl mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<h1 class="text-xl font-bold">Logo</h1>
<div class="flex gap-6">
<a href="#" class="hover:text-blue-600">Home</a>
<a href="#" class="hover:text-blue-600">About</a>
<a href="#" class="hover:text-blue-600">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Modal with backdrop blur -->
<div class="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center">
<div class="bg-white rounded-lg shadow-2xl p-8 max-w-md">
<h2 class="text-2xl font-bold mb-4">Modal Title</h2>
<p class="text-gray-600 mb-6">Modal content with blurred background</p>
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg">Close</button>
</div>
</div>
<!-- Notification toast with frosted glass -->
<div class="fixed top-4 right-4 backdrop-blur-lg bg-white/80 border border-white/20 rounded-lg shadow-xl p-4">
<p class="font-semibold text-gray-900">Notification</p>
<p class="text-sm text-gray-600">Your changes have been saved</p>
</div>Backdrop Blur Browser Support
Backdrop blur requires a semi-transparent background to work properly (e.g., bg-white/30). It's supported in all modern browsers but may not work in older browsers.
Brightness & Contrast
Adjust the brightness and contrast of elements:
Brightness
HTML
<!-- Darken -->
<img src="image.jpg" alt="Very dark" class="brightness-0">
<img src="image.jpg" alt="Dark" class="brightness-50">
<img src="image.jpg" alt="Slightly dark" class="brightness-75">
<img src="image.jpg" alt="Dim" class="brightness-90">
<img src="image.jpg" alt="Slightly dim" class="brightness-95">
<!-- Normal -->
<img src="image.jpg" alt="Normal" class="brightness-100">
<!-- Brighten -->
<img src="image.jpg" alt="Slightly bright" class="brightness-105">
<img src="image.jpg" alt="Bright" class="brightness-110">
<img src="image.jpg" alt="Brighter" class="brightness-125">
<img src="image.jpg" alt="Very bright" class="brightness-150">
<img src="image.jpg" alt="Maximum brightness" class="brightness-200">
<!-- Brightness on hover -->
<img
src="image.jpg"
alt="Hover to brighten"
class="brightness-75 hover:brightness-100 transition-all"
>Contrast
HTML
<!-- Low contrast -->
<img src="image.jpg" alt="No contrast" class="contrast-0">
<img src="image.jpg" alt="Low contrast" class="contrast-50">
<img src="image.jpg" alt="Reduced contrast" class="contrast-75">
<!-- Normal contrast -->
<img src="image.jpg" alt="Normal" class="contrast-100">
<!-- High contrast -->
<img src="image.jpg" alt="High contrast" class="contrast-125">
<img src="image.jpg" alt="Higher contrast" class="contrast-150">
<img src="image.jpg" alt="Maximum contrast" class="contrast-200">
<!-- Contrast on hover -->
<img
src="image.jpg"
alt="Hover to increase contrast"
class="contrast-100 hover:contrast-125 transition-all"
>Combining Brightness and Contrast
HTML
<!-- Darken and increase contrast for dramatic effect -->
<img
src="image.jpg"
alt="Dramatic"
class="brightness-90 contrast-125"
>
<!-- Brighten and reduce contrast for soft effect -->
<img
src="image.jpg"
alt="Soft"
class="brightness-110 contrast-90"
>
<!-- Image overlay effect -->
<div class="relative">
<img
src="image.jpg"
alt="Background"
class="brightness-50 contrast-125"
>
<div class="absolute inset-0 flex items-center justify-center">
<h2 class="text-4xl font-bold text-white">Overlay Text</h2>
</div>
</div>Saturation
Control color intensity with saturation:
HTML
<!-- Desaturate (remove color) -->
<img src="image.jpg" alt="No saturation" class="saturate-0">
<img src="image.jpg" alt="Low saturation" class="saturate-50">
<!-- Normal saturation -->
<img src="image.jpg" alt="Normal" class="saturate-100">
<!-- Increase saturation (more vibrant) -->
<img src="image.jpg" alt="Vibrant" class="saturate-150">
<img src="image.jpg" alt="Very vibrant" class="saturate-200">
<!-- Hover effect: desaturate to saturate -->
<img
src="image.jpg"
alt="Hover for color"
class="saturate-0 hover:saturate-100 transition-all duration-300"
>
<!-- Hover effect: normal to vibrant -->
<img
src="image.jpg"
alt="Hover for vibrant"
class="saturate-100 hover:saturate-150 transition-all"
>Grayscale & Sepia
Apply classic photo filter effects:
Grayscale
HTML
<!-- No grayscale (full color) -->
<img src="image.jpg" alt="Color" class="grayscale-0">
<!-- Full grayscale (black and white) -->
<img src="image.jpg" alt="Black and white" class="grayscale">
<!-- Grayscale on hover (color on hover) -->
<img
src="image.jpg"
alt="Hover for color"
class="grayscale hover:grayscale-0 transition-all duration-300"
>
<!-- Gallery with grayscale effect -->
<div class="grid grid-cols-3 gap-4">
<img src="image1.jpg" class="grayscale hover:grayscale-0 transition-all cursor-pointer">
<img src="image2.jpg" class="grayscale hover:grayscale-0 transition-all cursor-pointer">
<img src="image3.jpg" class="grayscale hover:grayscale-0 transition-all cursor-pointer">
</div>Sepia
HTML
<!-- No sepia -->
<img src="image.jpg" alt="Normal" class="sepia-0">
<!-- Full sepia (vintage brown tone) -->
<img src="image.jpg" alt="Vintage" class="sepia">
<!-- Sepia on hover -->
<img
src="image.jpg"
alt="Hover for sepia"
class="sepia-0 hover:sepia transition-all"
>
<!-- Vintage photo effect -->
<img
src="photo.jpg"
alt="Vintage photo"
class="sepia brightness-110 contrast-90"
>Hue Rotate
Rotate colors around the color wheel:
HTML
<!-- No hue rotation -->
<img src="image.jpg" alt="Original" class="hue-rotate-0">
<!-- Rotate hue -->
<img src="image.jpg" alt="15° rotation" class="hue-rotate-15">
<img src="image.jpg" alt="30° rotation" class="hue-rotate-30">
<img src="image.jpg" alt="60° rotation" class="hue-rotate-60">
<img src="image.jpg" alt="90° rotation" class="hue-rotate-90">
<img src="image.jpg" alt="180° rotation" class="hue-rotate-180">
<!-- Create color variations of icons -->
<div class="flex gap-4">
<svg class="w-8 h-8 text-blue-500 hue-rotate-0" fill="currentColor">...</svg>
<svg class="w-8 h-8 text-blue-500 hue-rotate-90" fill="currentColor">...</svg>
<svg class="w-8 h-8 text-blue-500 hue-rotate-180" fill="currentColor">...</svg>
</div>
<!-- Animated hue rotation -->
<div class="animate-spin-slow hue-rotate-0 hover:hue-rotate-180 transition-all duration-1000">
<img src="colorful.jpg" alt="Color shift">
</div>Invert
Invert colors for dramatic effects:
HTML
<!-- No inversion -->
<img src="image.jpg" alt="Normal" class="invert-0">
<!-- Full inversion -->
<img src="image.jpg" alt="Inverted" class="invert">
<!-- Invert on hover -->
<img
src="image.jpg"
alt="Hover to invert"
class="invert-0 hover:invert transition-all"
>
<!-- Invert logo for dark mode -->
<img
src="logo.svg"
alt="Logo"
class="dark:invert"
>
<!-- Create negative effect -->
<div class="bg-white">
<img src="photo.jpg" alt="Negative" class="invert">
</div>Drop Shadow
Add shadows that follow element shape (great for images with transparency):
HTML
<!-- Small drop shadow -->
<img src="logo.png" alt="Logo" class="drop-shadow-sm">
<!-- Default drop shadow -->
<img src="logo.png" alt="Logo" class="drop-shadow">
<!-- Medium drop shadow -->
<img src="logo.png" alt="Logo" class="drop-shadow-md">
<!-- Large drop shadow -->
<img src="logo.png" alt="Logo" class="drop-shadow-lg">
<!-- Extra large drop shadow -->
<img src="logo.png" alt="Logo" class="drop-shadow-xl">
<!-- 2XL drop shadow -->
<img src="logo.png" alt="Logo" class="drop-shadow-2xl">
<!-- No drop shadow -->
<img src="logo.png" alt="Logo" class="drop-shadow-none">
<!-- Icon with drop shadow -->
<svg class="w-16 h-16 text-blue-500 drop-shadow-lg" fill="currentColor">
<path d="..."/>
</svg>
<!-- Text with drop shadow -->
<h1 class="text-6xl font-bold text-white drop-shadow-lg">
Shadowed Text
</h1>Combining Multiple Filters
Stack multiple filters for complex visual effects:
HTML
<!-- Vintage photo effect -->
<img
src="photo.jpg"
alt="Vintage"
class="sepia brightness-110 contrast-90 saturate-50"
>
<!-- Dramatic black and white -->
<img
src="photo.jpg"
alt="Dramatic B&W"
class="grayscale contrast-150 brightness-90"
>
<!-- Soft, dreamy effect -->
<img
src="photo.jpg"
alt="Dreamy"
class="blur-sm brightness-110 saturate-110 contrast-90"
>
<!-- Neon glow effect -->
<img
src="image.jpg"
alt="Neon"
class="saturate-200 brightness-110 contrast-125 hue-rotate-15"
>
<!-- Cold, blue-tinted effect -->
<img
src="image.jpg"
alt="Cold"
class="hue-rotate-180 saturate-75 brightness-90"
>
<!-- Hover effect: from grayscale to vibrant -->
<img
src="image.jpg"
alt="Transform on hover"
class="grayscale saturate-50 brightness-90 hover:grayscale-0 hover:saturate-150 hover:brightness-100 transition-all duration-500"
>Interactive Filter Explorer
Experiment with filter utilities on a real image:
Filter Effects Explorer
Original
Blur Effect
Grayscale
Sepia
Brightness + Contrast
Saturated
Practical Filter Examples
Example 1: Image Gallery with Hover Effects
HTML
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Grayscale to color -->
<div class="group relative overflow-hidden rounded-lg">
<img
src="image1.jpg"
alt="Gallery 1"
class="w-full h-64 object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-500"
>
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors"></div>
</div>
<!-- Blur to sharp with brightness -->
<div class="group relative overflow-hidden rounded-lg">
<img
src="image2.jpg"
alt="Gallery 2"
class="w-full h-64 object-cover blur-sm brightness-75 group-hover:blur-none group-hover:brightness-100 transition-all duration-500"
>
</div>
<!-- Saturate and scale -->
<div class="group relative overflow-hidden rounded-lg">
<img
src="image3.jpg"
alt="Gallery 3"
class="w-full h-64 object-cover saturate-50 group-hover:saturate-150 group-hover:scale-110 transition-all duration-500"
>
</div>
</div>Example 2: Frosted Glass Navigation
HTML
<!-- Sticky navigation with frosted glass -->
<nav class="sticky top-0 z-50 backdrop-blur-md bg-white/80 dark:bg-gray-900/80 border-b border-gray-200/50 dark:border-gray-700/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center">
<img src="logo.svg" alt="Logo" class="h-8 dark:invert">
</div>
<!-- Navigation links -->
<div class="hidden md:flex gap-8">
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
Home
</a>
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
Features
</a>
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
Pricing
</a>
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
Contact
</a>
</div>
<!-- CTA Button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
Get Started
</button>
</div>
</div>
</nav>Example 3: Modal with Backdrop Blur
HTML
<!-- Modal overlay -->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm bg-black/30 animate-fade-in">
<!-- Modal content -->
<div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full p-6 animate-scale-in">
<!-- Close button -->
<button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<!-- Icon -->
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
</svg>
</div>
<!-- Content -->
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
Confirm Action
</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">
Are you sure you want to proceed with this action? This cannot be undone.
</p>
<!-- Actions -->
<div class="flex gap-3">
<button class="flex-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-semibold py-3 rounded-lg transition-colors">
Cancel
</button>
<button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors">
Confirm
</button>
</div>
</div>
</div>Example 4: Product Showcase with Filters
HTML
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Product 1 -->
<div class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
<div class="relative overflow-hidden">
<!-- Product image with hover effect -->
<img
src="product1.jpg"
alt="Product"
class="w-full h-80 object-cover brightness-90 group-hover:brightness-100 group-hover:scale-110 transition-all duration-500"
>
<!-- Discount badge -->
<div class="absolute top-4 right-4 backdrop-blur-md bg-red-500/90 text-white px-4 py-2 rounded-full font-bold drop-shadow-lg">
20% OFF
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
Premium Product
</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
High-quality product with amazing features
</p>
<div class="flex items-center justify-between">
<span class="text-3xl font-bold text-gray-900 dark:text-white">$299</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 2 with vintage effect -->
<div class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
<div class="relative overflow-hidden">
<img
src="product2.jpg"
alt="Vintage Product"
class="w-full h-80 object-cover sepia brightness-110 contrast-90 group-hover:sepia-0 group-hover:brightness-100 group-hover:contrast-100 transition-all duration-500"
>
<div class="absolute top-4 right-4 backdrop-blur-md bg-amber-500/90 text-white px-4 py-2 rounded-full font-bold drop-shadow-lg">
Vintage
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
Vintage Collection
</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
Classic design with timeless appeal
</p>
<div class="flex items-center justify-between">
<span class="text-3xl font-bold text-gray-900 dark:text-white">$399</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors">
Add to Cart
</button>
</div>
</div>
</div>
</div>Example 5: Team Member Grid
HTML
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="group text-center">
<div class="relative mb-4 overflow-hidden rounded-lg">
<img
src="team1.jpg"
alt="Team Member"
class="w-full aspect-square object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300"
>
<div class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors"></div>
</div>
<h3 class="font-bold text-lg text-gray-900 dark:text-white">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">CEO & Founder</p>
</div>
<div class="group text-center">
<div class="relative mb-4 overflow-hidden rounded-lg">
<img
src="team2.jpg"
alt="Team Member"
class="w-full aspect-square object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300"
>
<div class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors"></div>
</div>
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Jane Smith</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">CTO</p>
</div>
<!-- More team members... -->
</div>Filters Playground
Experiment with filters and backdrop effects:
Create Filter Effects
Experiment with blur, brightness, and backdrop filters
Frosted Glass Effect
This card uses backdrop-blur to create a beautiful frosted glass effect. The background gradient is visible but blurred.
Filter Best Practices
Follow These Guidelines:
- Test performance: Filters can impact performance on older devices
- Use backdrop-blur with transparency: Requires semi-transparent backgrounds
- Combine filters thoughtfully: Too many filters can degrade quality
- Add transitions: Smooth filter changes with transition utilities
- Consider accessibility: High contrast filters may affect readability
- Optimize images first: Don't rely solely on filters for image quality
- Test browser support: Some filters have limited support in older browsers
- Use semantic values: brightness-100 for normal, not arbitrary values
Key Takeaways
- Blur:
blur-*blurs the element itself - Backdrop blur:
backdrop-blur-*blurs content behind element - Brightness:
brightness-*(0-200) adjusts light/dark - Contrast:
contrast-*(0-200) adjusts contrast - Saturation:
saturate-*controls color intensity - Grayscale:
grayscaleremoves all color - Sepia:
sepiaapplies vintage brown tone - Hue rotate:
hue-rotate-*shifts colors - Invert:
invertinverts all colors - Drop shadow:
drop-shadow-*follows element shape - Filters can be combined for complex effects
- Always add transitions for smooth filter animations
What's Next?
Congratulations! You've completed the Transforms & Animations category. You can now create stunning visual effects with transforms, transitions, and filters.
You've now mastered the fundamentals and advanced techniques of Tailwind CSS! You have all the tools to build beautiful, responsive, interactive, and performant web interfaces. Continue practicing and exploring to become a Tailwind expert!
🎯 Practice Challenge!
Create a photo gallery with advanced filter effects! Include images that start grayscale and become colorful on hover, a frosted glass navigation bar with backdrop blur, and a modal with a blurred background overlay. Add smooth transitions to all filter changes and combine multiple filters for creative effects like vintage photos or dramatic black and white!
Test Your Understanding
Question 1 of 3Score: 0/0