Glassmorphism: The Complete CSS Guide for Frosted Glass UIs

Glassmorphism is a visual design language that simulates frosted glass — translucent surfaces with a blurred view of whatever is behind them. It took the design world by storm in 2021 with Apple's macOS Big Sur and has since become a staple of modern dark-mode UIs.

The effect is built on four core properties: 1. Background with transparency — `rgba()` or `hsl()` with low alpha 2. Backdrop filter blur — `backdrop-filter: blur(Xpx)` 3. Hairline border — `rgba(255,255,255,0.2)` on a semi-transparent background 4. Top highlight — `inset 0 1px 0 rgba(255,255,255,0.3)` in box-shadow

Get all four right and you have genuine glassmorphism. Miss any one and it falls flat.

.glass-card {
  /* 1. Translucent fill */
  background: rgba(255, 255, 255, 0.12);

  /* 2. The frosted blur */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* 3. Hairline border */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  /* 4. Top light catch + depth shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 32px rgba(0, 0, 0, 0.2);
}

The `inset 0 1px 0` is the most important (and most overlooked) part. It simulates a bright light source hitting the top edge of the glass, exactly as it would in the physical world.

Blur radius is the most sensitive parameter. Too low and the effect disappears. Too high and the background becomes a smear with no depth:

- 4–8px — very subtle, barely readable as glass. Use for text overlays. - 12–16px — the sweet spot for cards and panels. - 20–30px — strong glass for modals and sidebars with complex backgrounds. - 40px+ — extreme blur, useful only for full-screen overlays.

/* Three glass tiers */
.glass-light  { backdrop-filter: blur(8px);  }
.glass-medium { backdrop-filter: blur(16px); }
.glass-heavy  { backdrop-filter: blur(28px); }

Match blur intensity to the complexity of the background. Simple colors need less blur. Busy photos or gradients need more.

Glassmorphism on a dark background inverts the logic:

/* Light glass — on gradient/photo backgrounds */
.glass-light-mode {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dark glass — on dark backgrounds */
.glass-dark-mode {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

Dark glass uses less background opacity since you're already on a dark surface. The border and inner highlight are still essential — they remain the same color (white) regardless of mode.

Colored glass adds personality. Tint the `background` and `border` with your brand color:

.glass-purple {
  background: rgba(168, 85, 247, 0.12);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 16px;
  color: #c084fc;
}

Keep the opacity low (0.08–0.15) and the border slightly more opaque (0.25–0.4). This creates a window tinted with the color rather than a solid fill.

Safari has supported `backdrop-filter` for years. Chrome/Edge added it in version 76. Firefox required a flag until version 103.

Always include the `-webkit-` prefix:

backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

For older Firefox, provide a solid fallback:

@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(20, 20, 30, 0.9);
  }
}

Today's support is broad enough that fallbacks are only needed for legacy enterprise environments.

Glass is a visual tool, not a universal solution. Avoid it when:

- Text legibility suffers — if copy on your glass element requires squinting, increase opacity or add a text shadow - The background is static — glass only makes sense over dynamic, colorful backgrounds. Against a plain `#0a0a0f` it's invisible - Overused on the whole page — one or two glass elements create depth; ten create noise - Performance is critical — `backdrop-filter` triggers a GPU compositing layer. On mobile, test frame rates before shipping.