Glassmorphism in CSS: Build the Frosted Glass Effect the Right Way

Craft realistic glassmorphism UI cards using backdrop-filter, rgba backgrounds, and subtle borders. Includes browser support notes, performance tips and accessibility considerations.

Glassmorphism became one of the defining visual trends of recent years — and for good reason. When done well, it creates a sense of depth and layering that flat colour simply can't achieve. The trick is knowing what to avoid.

Glassmorphism requires four ingredients:

1. A colourful background behind the element (gradient or image)
2. backdrop-filter: blur() to frost the background
3. A semi-transparent background
4. A subtle light border on the top and left edges

.glass-card {
  /* Semi-transparent background */
  background: rgba(255, 255, 255, 0.1);

  /* The frosted glass effect */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Safari */

  /* Subtle edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(255, 255, 255, 0.35);

  border-radius: 16px;
  padding: 24px;
}

.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

Adding saturate(180%) to the filter makes the blurred background more vivid, enhancing the glass quality.

backdrop-filter is well-supported in modern browsers but is GPU-intensive. Avoid:

• More than 3–4 glass elements visible at once
• Large blur radii (above 30px) on mobile
• Nesting glass elements inside each other

Add a fallback for unsupported browsers:

@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255,255,255,0.1);
  }
}

The translucency that makes glass beautiful also makes text harder to read. Always:

• Test contrast ratio on the actual background, not the card colour
• Keep body text at 4.5:1 contrast or higher
• Don't use glassmorphism for text-heavy content like articles or forms
• Avoid glass on moving or animated backgrounds — the blur calculation causes visible latency