Introduction
CSS filters apply graphical effects like blur, brightness, contrast, and saturation to any element. They're GPU-accelerated and work on text, images, and containers.
backdrop-filter is the star for modern UI: it filters the area behind an element, enabling frosted glass, blurred modal backgrounds, and navigation bar depth.
Together, filter and backdrop-filter are a powerful visual toolkit.
Key Concepts
filter Property
.image-muted {
filter: grayscale(100%) opacity(0.7);
}
.image-muted:hover {
filter: grayscale(0%) opacity(1);
transition: filter 0.3s;
}
.vintage {
filter: sepia(0.4) contrast(1.1) brightness(0.9);
}
backdrop-filter
.glass-panel {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1rem;
}
Practical Examples
1. Frosted Glass Nav
.nav {
position: fixed;
top: 0; width: 100%;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px) saturate(1.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
2. Image Hover Effects
.gallery img {
filter: brightness(0.9) saturate(0.8);
transition: filter 0.3s;
}
.gallery img:hover {
filter: brightness(1.05) saturate(1.2);
}
3. Drop Shadow for PNGs
.icon {
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}
4. Modal Backdrop
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
display: grid; place-items: center;
}
Best Practices
- backdrop-filter needs semi-transparent background.
- Keep blur 8-20px — extreme values are expensive.
- drop-shadow() for irregular shapes, not box-shadow.
- Chain filters for nuanced effects.
- Add transition on filter for smooth changes.
- Test on mobile — filters are GPU-heavy.
Common Pitfalls
- Opaque background hides backdrop-filter effect.
- box-shadow on transparent PNGs — use drop-shadow().
- Too many filtered layers consume GPU memory.
- No fallback for unsupported backdrop-filter.
Browser Support
filter: ~97%. backdrop-filter: ~95% (Chrome 76+, Safari 9+ with -webkit-, Firefox 103+). Include -webkit-backdrop-filter.
Related Guides
- CSS Blend Modes — combine with filters
- CSS Animation & Keyframes — animate filter values
- CSS Custom Properties — reusable filter presets