Glassmorphism in CSS: backdrop-filter, contrast and fallbacks

Frosted glass looks good on photos and gradients and fails on plain pages. Here is how to use it well.

How the effect is made

backdrop-filter applies a filter to what is behind an element, not to the element itself. With blur() the background behind the panel becomes soft, as if seen through frosted glass. The panel must have a semi-transparent background, because the filter is applied to the area behind it and is only visible where the panel lets it show through.

A solid starting recipe

.glass {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
}

Add a soft shadow if the panel needs to stand out. The generator on this site produces the same lines.

Contrast comes first

The blurred area behind the panel is often a mix of bright and dark. Text on it can fail contrast in some parts. Put a slightly more opaque tint on the panel, use bold or larger text, or add a subtle dark overlay. Check with the most extreme part of your background, and with the dark mode version of the page.

Fallback for browsers without support

Write the translucent panel inside a @supports block and give a more solid colour outside:

.glass { background: rgba(255, 255, 255, 0.85); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.18); }
}

Browsers without the filter then get a readable, almost solid panel instead of unreadable text over a busy picture.

Support check

On 13 November 2026 we checked that current Chrome and WebKit (the engine of Safari) all accept backdrop-filter: blur(...). Visitors using older versions exist, so keep the fallback.

Performance

The browser must blur the area behind the panel whenever anything behind it changes (scrolling, video, animation). Use the effect on small panels, not on the whole page, avoid several panels overlapping, and never animate the blur radius.

When not to use it

On plain light or dark backgrounds the effect is invisible and only costs speed. On pages for people who read a lot of text, a solid panel is easier. Do not put it on top of moving video that is hard to read.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.