CSS Glassmorphism Generator Guide: Frosted Glass UI Effects (2026)

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Five ingredients:

1. Transparent background — 10-25% white over the underlying color.
2. Backdrop blur — 8-20px blur radius.
3. Subtle border — 1px white at low opacity for "edge of glass".
4. Rounded corners — 12-24px feels modern.
5. Soft shadow — 0 8px 32px gives lift without harshness.

Glassmorphism only works if there's something interesting behind the glass. On a flat white page, blur has nothing to blur — the effect disappears.

Common backdrops:

• Gradient mesh or radial blobs
• Photographic hero image
• Animated gradient
• Multiple colored shapes positioned absolutely

.glass-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

For dark themes, swap to a translucent black background. The white border at lower opacity still works to define the edge.

• Chrome, Edge, Firefox 103+ — Full support.
• Safari — Needs -webkit-backdrop-filter prefix.
• Older Firefox — Falls back to solid background; provide a fallback color.
• Performance — Backdrop blur is GPU-intensive; avoid stacking many glass layers on mobile.

• Don't put text directly over the glass without sufficient contrast — use a slightly darker background tint.
• Limit to 1-2 glass elements per screen — overuse looks chaotic.
• Use brighter, saturated backgrounds; muted ones make the glass invisible.
• Pair with crisp typography and thin lines to feel "premium" rather than "soft".
• Test in both light and dark modes if your theme supports both.