How to Create the Glassmorphism (Frosted Glass) Effect with CSS

Glassmorphism is the frosted-glass look: a translucent panel that blurs whatever is behind it, with a thin light border and soft shadow. It works best over colorful or image backgrounds and gives interfaces a sense of depth.

The recipe

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

• A semi-transparent background lets the content behind show through.
• backdrop-filter: blur() blurs whatever is behind the element (not the element's own content).
• A 1px light border catches the edge like the rim of glass.
• A soft shadow lifts the panel off the background.

Step by step

1. 1Put the panel over a colorful gradient or photo; on a flat color the blur is invisible.
2. 2Set the translucent background with a low alpha (0.1 to 0.25 for light glass, similar for dark).
3. 3Add backdrop-filter with a blur between about 8px and 20px, including the -webkit- prefix for older Safari versions.
4. 4Add the border, radius, and shadow, then tweak until the text is easy to read.

Accessibility

• Text on translucent panels can drop below the contrast minimum when the background behind it changes. Test over the brightest and darkest parts.
• Add a slightly more opaque background, or a text shadow, if readability suffers.
• Respect users who prefer reduced transparency where the platform exposes it.

Performance and fallbacks

• Blurring is GPU-intensive; avoid huge blurred areas and many stacked layers, especially on mobile.
• Provide a fallback using @supports not (backdrop-filter: blur(1px)) with a more opaque solid background.
• Don't animate the blur radius; animate opacity or transform instead.