CSS backdrop-filter

The backdrop-filter CSS property allows you to apply graphical effects to the area behind an element, not the element itself. This enables stunning UI effects such as frosted glass, vivid overlays, and dynamic modals that enhance depth, focus, and readability in modern web design.

How It Works

  • Backdrop Area: Effects are applied to whatever is behind the element, not its own content.
  • Transparency Required: The element (or its parent) must have a transparent or semi-transparent background (e.g., background: rgba(255,255,255,0.3)).
  • Multiple Filters: You can chain multiple filter functions (e.g., blur(8px) brightness(0.7)).
  • Popular Use Cases: Glassmorphism, overlays, modals, navigation bars, and immersive backgrounds.

Common Filter Functions

  • blur(px) – Softens the backdrop for a frosted glass effect.
  • brightness(%) – Adjusts the brightness of the backdrop.
  • contrast() – Increases or decreases contrast.
  • grayscale() – Converts the backdrop to grayscale.
  • sepia(), invert(), saturate(), hue-rotate() – More creative options.

Syntax

backdrop-filter: blur(5px) brightness(0.8);
-webkit-backdrop-filter: blur(5px) brightness(0.8);

Note: Always add -webkit-backdrop-filter for Safari support.

💡 Tip: backdrop-filter is inherited by child elements, so you can nest effects for creative results!

Interactive Examples

Frosted Glass Effect

Frosted Glass
.frosted-glass {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

Blur + Brightness

Blur + Brightness
.blur-bright {
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px) brightness(0.7);
  -webkit-backdrop-filter: blur(4px) brightness(0.7);
}

Contrast & Grayscale

Contrast + Grayscale
.contrast-gray {
  background: rgba(255,255,255,0.2);
  backdrop-filter: contrast(2) grayscale(1);
  -webkit-backdrop-filter: contrast(2) grayscale(1);
}

Colorful Glassmorphism

Glassmorphism
.glassmorphism {
  background: linear-gradient(135deg, rgba(52,152,219,0.25), rgba(142,68,173,0.18));
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border: 1.5px solid rgba(255,255,255,0.25);
}

Hue Rotate Overlay

Hue Rotate
.hue-rotate {
  background: rgba(255,255,255,0.18);
  backdrop-filter: hue-rotate(120deg) blur(3px);
  -webkit-backdrop-filter: hue-rotate(120deg) blur(3px);
}

Sepia Modal

Sepia Modal
.sepia-modal {
  background: rgba(255,255,255,0.25);
  backdrop-filter: sepia(0.8) blur(2px);
  -webkit-backdrop-filter: sepia(0.8) blur(2px);
}
Try it out: Hover over each card to see a highlight effect. Click a card to copy its CSS code! All effects are pure CSS—no JavaScript needed.

Browser Support

The backdrop-filter property is supported in all modern browsers, but may require the -webkit- prefix for Safari and some mobile browsers. Always test your design for compatibility.

References