Glassmorphism CSS: The Honest Frosted-Glass Recipe

Most glassmorphism tutorials get you 80% of the way there and stop. They show you backdrop-filter: blur() on top of a semi-transparent background, you copy it, and the result looks flat, gray, and vaguely cheap. The frosted-glass effect you actually want, the one that looks like real glass sitting over a photo, needs three more details that almost no single tutorial mentions together: a saturation boost to kill the gray wash, a hairline light border that sells the glass edge, and a proper Safari prefix plus fallback so it does not silently break. Here is the honest, complete recipe.

The base layer: blur plus a translucent background

The core of glassmorphism is the backdrop-filter property, which applies a graphical effect to whatever sits behind the element. Per MDN, the critical catch is this: because the filter applies to everything behind the element, the element or its background must be transparent or partially transparent for the effect to show at all. A fully opaque background hides the blur completely. So you always pair the two:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
}

Use an rgba() background (or hsla()) with low alpha, roughly 0.1 to 0.25 for a light-on-dark card. The blur radius is taste, but 8px to 16px reads as glass; below 4px it looks like a smudge, above 25px it becomes opaque fog. This is the part everyone gets right.

Fix #1: saturate() to undo the gray wash

Blur alone desaturates whatever is behind it. The colors of the underlying photo get muddied into a dull gray haze, which is exactly why naive glassmorphism looks lifeless. The fix is to push the backdrop's saturation back up at the same time you blur it. MDN lists saturate() as a valid backdrop-filter function, and you can chain multiple filters in one declaration:

backdrop-filter: blur(12px) saturate(180%);

The saturate(180%) reintroduces the punch the blur stole, so the colors bleeding through the glass stay vivid. This single addition is the biggest visual upgrade and the one most tutorials omit. Treat 150% to 200% as the working range.

Fix #2: the 1px light border that sells the edge

Real glass catches light along its edge. A flat translucent rectangle does not. Add a hairline border with a low-alpha white to fake that highlight:

border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;

That faint top-and-side rim is what makes the panel read as a distinct pane of glass rather than a blurry hole punched in the page. Pair it with a soft, diffuse drop shadow to lift the card off the background. Keep the shadow large and low-opacity; a harsh shadow breaks the illusion. You can dial in the spread and blur with a box-shadow generator until the lift feels natural, something like 0 8px 32px rgba(0, 0, 0, 0.2).

Fix #3: the Safari prefix and a real fallback

According to MDN, backdrop-filter reached Baseline 2024, so current browsers support it unprefixed. But Safari only dropped the prefix in version 18; every version from Safari 9 through 17 (and the iOS releases that shipped with them) still requires -webkit-backdrop-filter, so you should ship both. More importantly, browsers that do not support it at all will render your card as a barely-visible 15%-opacity sliver with unreadable text. That is a hard failure, not a graceful one.

The correct pattern is a solid-ish fallback first, then a feature query that upgrades to glass only where it is supported. Per the @supports docs, you test the property-value pair directly and combine the standard and prefixed checks with or:

.glass {
  background: rgba(30, 30, 40, 0.85); /* opaque-ish fallback */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

@supports ((backdrop-filter: blur(12px)) or
           (-webkit-backdrop-filter: blur(12px))) {
  .glass {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
  }
}

Now unsupported browsers get a legible solid card, and capable ones get the real frosted glass. List the -webkit- line before the unprefixed one so the standard property wins when both are understood.

The discipline section: 1 to 3 glass elements, max

Glassmorphism is a seasoning, not a base coat. The effect depends on contrast between the sharp glass pane and a rich, textured background showing through it. Stack glass on glass on glass and every layer blurs the one beneath, the depth cue collapses, and the whole page turns into gray soup. Worse, backdrop-filter is genuinely expensive to composite, so a screen full of blurring panels can stutter on lower-end devices.

Pick one to three hero elements that deserve the treatment: a navbar, a single modal, one feature card. Everything else stays solid. The glass should feel like the special object on the page, because rarity is what makes it feel premium.

The contrast warning nobody gives you

Translucent backgrounds create a real accessibility trap: your text contrast changes depending on what scrolls behind the glass. Text that passes against a dark photo can become unreadable the moment a light region slides underneath. You cannot test against one backdrop and call it done.

Test your text against both the lightest and the darkest possible content that could appear behind the panel. If the card sits over a scrolling page or a video, assume the worst case in both directions and verify the foreground text still clears WCAG thresholds in each. Run the foreground and the most punishing backdrop color through a contrast checker and confirm it meets at least 4.5:1 for body text. For the full reasoning on AA versus AAA ratios, see our guide on WCAG color contrast levels. A common defense is bumping the panel's background alpha higher (toward 0.25 to 0.4) so the glass is more opaque and the text floats on a more stable base.

Putting it together

The complete, honest recipe is: a translucent rgba() background, backdrop-filter: blur() saturate(180%) to blur without the gray wash, a 1px low-alpha white border for the edge highlight, a soft large box-shadow for lift, the -webkit- prefix plus an @supports fallback, and the restraint to use it on only a few elements that pass contrast against every backdrop. Prototype the exact blur, alpha, and saturation values live in a glassmorphism generator, and if your card sits on a flat backdrop rather than a photo, a subtle CSS gradient behind it gives the blur something colorful to chew on.

Frequently Asked Questions