Glassmorphism: Getting the Frosted-Glass Look Right

A designer hands over a mockup: translucent cards floating over a gradient background, everything behind them slightly blurred, like frosted glass. It looks great in Figma. Then it ships, and the body text sitting on top of the glass card is unreadable against a busy photo background, Safari renders the blur completely differently than Chrome, and on a low-end Android phone the whole page stutters when scrolling. Glassmorphism is one of the easiest CSS effects to get visually right and functionally wrong at the same time.

The Actual CSS Behind the Effect

Glassmorphism is really four properties working together: a semi-transparent background, a background blur, a subtle border to define the edge (since a blurred edge alone reads as fuzzy, not glass-like), and often a light inner highlight to suggest a reflective surface.

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 28px;
}

The saturate(140%) alongside the blur matters more than it looks — plain blur alone tends to wash out colors and make the glass panel look grey and lifeless. Boosting saturation slightly compensates for that, keeping whatever's behind the glass looking vivid rather than muddy.

The -webkit- Prefix Isn't Optional

backdrop-filter has broad support in modern browsers, but Safari — including iOS Safari — still requires the -webkit- prefix as of 2026 for reliable rendering. Skip it and the effect silently fails on a large share of mobile traffic, with the "glass" card just rendering as flat, opaque color instead of degrading gracefully.

The Contrast Problem Nobody Designs For

A frosted panel's readability depends entirely on what's behind it, which is exactly the part a designer can't fully control once real content ships. Text that reads fine over a dark, low-detail background gradient can become nearly invisible over a busy photo. Two defenses actually work:

• Add a dark scrim as a second layer — a semi-opaque black overlay underneath the blur, independent of whatever image sits behind it, so text contrast stays consistent regardless of background content.
• Increase blur radius, not just opacity — a stronger blur (20px+) smooths out background detail more effectively than raising background opacity, which just makes the glass look solid and defeats the point of the effect.

.glass-card {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

A Full Example: Glass Navigation Bar

.glass-nav {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(10, 12, 20, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

A sticky glass nav is one of the most practical uses of the effect — it lets page content scroll visibly underneath while keeping navigation legible, rather than the flat opaque bar that's the usual default.

Light Mode Glass Needs a Different Recipe

Most glassmorphism examples online assume a dark background, because the effect reads more clearly against dark, moody gradients. On a light background, the same translucent-white recipe washes out almost completely. For light mode, invert the approach — a darker, more opaque tint reads better than a barely-there white one:

/* Dark background variant */
.glass-dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Light background variant */
.glass-light {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

Test both variants against real content before committing to one — a glass effect tuned only in a dark-mode design tool routinely fails the moment someone toggles a light theme.

Common Mistakes in Glassmorphism Implementations

• No fallback for unsupported browsers — always set a solid background color as the base; backdrop-filter layers on top rather than replacing it, so unsupported browsers still get a readable, if flat, result.
• Border radius mismatch with parent — a glass panel nested inside another rounded container needs a smaller radius than its parent or the corners visually clash.
• Applying blur to text-heavy panels — glassmorphism was designed for chrome and overlays, not for the primary reading surface of a page; long-form text over a blurred background fatigues the eye faster than plain a background does.
• Ignoring the border entirely — without a 1px semi-transparent border, a glass panel can look like a rendering bug rather than an intentional design choice, especially at low blur values.

Performance: Why Too Much Glass Makes Scrolling Stutter

backdrop-filter is one of the more expensive CSS properties to render because the browser has to continuously recompute the blur of everything behind the element as the page scrolls or animates. A single glass card is fine. A page with fifteen overlapping glass panels, especially on a lower-end device, can visibly drop frames. Keep blur radius reasonable (under 24px), and avoid stacking multiple blurred layers directly on top of each other.

A Glass Button, for Contrast

Panels aren't the only place glassmorphism gets used — a glass button over a photo hero is common too, and it needs its own hover treatment since the usual color-shift approach reads poorly on translucent surfaces:

.glass-btn {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  transition: background 160ms ease;
}
.glass-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

Raising the background opacity on hover (rather than changing hue) keeps the glass aesthetic intact while still giving a clear, perceptible state change.

Where Glassmorphism Actually Works — and Where It Doesn't