DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Glassmorphism in CSS: The Frosted Glass Effect Done Right

#webdev #css #tutorial #design

Glassmorphism is the frosted glass effect that took over UI design around 2020-2021. Apple uses it extensively in macOS and iOS. Windows uses it in their Fluent Design system. And when done well, it creates a sense of depth and hierarchy that flat design cannot match.

The effect relies on three CSS properties working together: backdrop-filter for the blur, a semi-transparent background, and a subtle border. Getting the balance right between these three is the difference between "elegant frosted glass" and "illegible mess."

The core CSS 

.glass-card {
  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);
}
Enter fullscreen mode Exit fullscreen mode

Each property serves a specific purpose:

backdrop-filter: blur(12px) applies a Gaussian blur to everything behind the element. The blur radius controls the "frosted" intensity. 4-8px gives a subtle frost. 12-20px gives a heavy, opaque frost. Above 20px and the background becomes so blurred that you lose the glass effect entirely -- it just looks solid.

background: rgba(255, 255, 255, 0.15) adds a semi-transparent white overlay. This is what gives the glass its color tint. Lower opacity (0.05-0.15) looks like clear glass. Higher opacity (0.25-0.40) looks more like frosted or tinted glass. On dark backgrounds, use rgba(255, 255, 255, 0.05-0.10). On light backgrounds, you might use rgba(0, 0, 0, 0.05-0.10) or a slightly more opaque white.

border: 1px solid rgba(255, 255, 255, 0.2) provides the edge definition that makes the glass card distinct from its surroundings. Without the border, glass elements blend into each other. A slightly lighter border catches simulated "light" and sells the glass illusion.

The background matters enormously

Glassmorphism only works when there is something interesting behind the glass. A glass card over a solid white background looks like a slightly tinted white card -- the blur has nothing to blur. The effect shines over:

  • Gradient backgrounds
  • Background images (especially with color variation)
  • Other content or cards (creating layered depth)
  • Animated or dynamic backgrounds 
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Without a colorful or textured background, skip glassmorphism entirely. It is a contextual effect, not a universal one.

Accessibility concerns

The biggest problem with glassmorphism is readability. Text on a semi-transparent, blurred background can be hard to read, especially for users with visual impairments. Mitigation strategies:

  1. Increase background opacity for content-heavy glass elements. A card displaying a paragraph of text needs more opacity (0.3-0.5) than a decorative overlay.

  2. Increase text contrast. Pure white text on glass over a light background fails WCAG contrast ratios. Use a text shadow or slightly darken the glass background.

.glass-card p {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
Enter fullscreen mode Exit fullscreen mode
  1. Provide a fallback for reduced motion preferences. 
@media (prefers-reduced-transparency) {
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: none;
  }
}
Enter fullscreen mode Exit fullscreen mode

Browser support and fallbacks

backdrop-filter is supported in all modern browsers, but you should always provide a fallback:

.glass-card {
  /* Fallback for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.8);
}

@supports (backdrop-filter: blur(12px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
Enter fullscreen mode Exit fullscreen mode

The -webkit- prefix is still needed for Safari.

Performance considerations

backdrop-filter is GPU-intensive. It requires the browser to render everything behind the element, apply a blur kernel, and composite the result every frame. On low-end devices or when animating glass elements, this can cause jank.

Avoid applying backdrop-filter to large elements or many elements simultaneously. A glass navigation bar is fine. Twenty glass cards in a scrollable grid might cause performance issues on mobile devices.

I built a glassmorphism generator at zovo.one/free-tools/glassmorphism-generator that lets you adjust blur intensity, background opacity, border opacity, and border radius in real time over a customizable background. See the result instantly and copy the exact CSS. Takes the trial-and-error out of finding the right balance for your design.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)