CSS Filter Effects

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

css

.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

css

.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

css

.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

css

.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

css

.icon {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}

css

.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.

CSS Blend Modes — combine with filters
CSS Animation & Keyframes — animate filter values
CSS Custom Properties — reusable filter presets