Frosted glass effect without opacity hacks
Frosted glass used to require a blurred copy of the background behind the element: a pseudo-element with the same background image, a filter: blur, and z-index stacking. backdrop-filter applies effects directly to whatever is rendered behind the element.
2 backdrop-filter: blur(12px) saturate(1.5);
3 background: rgba(255,255,255,.1);
4}
2.card::before {
3 content: ''; position: absolute; inset: 0;
4 background-image: url(bg.jpg);
5 background-size: cover;
6 filter: blur(12px);
7 z-index: -1;
8}
Backdrop filter Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
Your first month is free
Managed WordPress hosting for faster sites.
Real blur
The blur applies to whatever is rendered behind the element, including other elements. Not just a static background image copy.
Stacks filters
Combine blur, brightness, contrast, saturate, and grayscale in a single declaration.
No extra elements
No ::before pseudo-element with a positioned blurred background duplicate. One property on the element.
How it works
Frosted glass required duplicating the background behind the card: a ::before pseudo-element positioned absolutely with the same background image, a filter: blur() applied, and careful z-index stacking. It only worked with a known static background and broke with scrolling or dynamic content behind it.
backdrop-filter applies filter effects to the area behind the element in the stacking context. It blurs, desaturates, or brightens whatever is rendered behind it — including other elements, not just the page background. Pair it with a semi-transparent background to let the blurred content show through.