CSS Filters & Backdrop Filters
CSS filters create visual effects like blur, brightness, contrast, and grayscale directly in the browser - no image editing needed. Backdrop-filter creates the frosted glass effect used in modern UI designs like Apple's interfaces.
15 min•By Priygop Team•Updated 2026
Filter Functions
- filter: blur(4px) - Gaussian blur. Higher values = more blur. Great for backgrounds
- filter: brightness(1.2) - Increase/decrease brightness. 1 = normal, 0 = black, 2 = double brightness
- filter: contrast(1.5) - Increase contrast. 1 = normal, 0 = gray, 2 = high contrast
- filter: grayscale(100%) - Convert to grayscale. 0% = color, 100% = fully gray. Common for disabled states
- filter: saturate(200%) - Boost color saturation. 0% = no color, 100% = normal, 200% = vivid
- filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)) - Follows element shape (unlike box-shadow which follows the box)
- backdrop-filter: blur(10px) - Blurs content BEHIND the element. Creates frosted glass / glassmorphism effect
- Multiple filters - filter: blur(2px) brightness(0.8) grayscale(50%). Chain multiple effects
Filter & Glassmorphism Code
Filter & Glassmorphism Code
/* Glassmorphism card (frosted glass) */
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 24px;
}
/* Image hover grayscale effect */
.gallery img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.gallery img:hover {
filter: grayscale(0%);
}
/* Dim background image */
.hero {
background: url('hero.jpg') center/cover;
filter: brightness(0.6);
}
/* Disabled state */
.disabled {
filter: grayscale(100%) opacity(0.5);
pointer-events: none;
}
/* Drop shadow follows shape (better for PNGs) */
.logo {
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}Diagram
Loading diagram…
Transitions for state changes, @keyframes for complex multi-step animations
Try It Yourself: Filter Gallery
Try It Yourself: Filter GalleryHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|29 lines|1886 chars|✓ Valid syntax
UTF-8
Quick Quiz
Key Takeaways
- CSS filters create visual effects like blur, brightness, contrast, and grayscale directly in the browser - no image editing needed.
- filter: blur(4px) - Gaussian blur. Higher values = more blur. Great for backgrounds
- filter: brightness(1.2) - Increase/decrease brightness. 1 = normal, 0 = black, 2 = double brightness
- filter: contrast(1.5) - Increase contrast. 1 = normal, 0 = gray, 2 = high contrast