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. Put the panel over a colorful gradient or photo; on a flat color the blur is invisible.
2. Set the translucent background with a low alpha (0.1 to 0.25 for light glass, similar for dark).
3. Add backdrop-filter with a blur between about 8px and 20px, including the -webkit- prefix for older Safari versions.
4. Add 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.

Use it sparingly

The effect is eye-catching but easily overused. Reserve it for a few prominent surfaces such as a modal, card, or navigation bar, and keep everything else simple.

Frequently asked questions

What CSS property creates the frosted glass effect?

backdrop-filter: blur(), combined with a semi-transparent background color.

Why isn't my backdrop-filter working?

The element needs a translucent background, there must be content behind it to blur, and older Safari needs the -webkit- prefix.

Is glassmorphism accessible?

It can be, if you verify text contrast over all backgrounds and provide a more opaque fallback.

Does backdrop-filter hurt performance?

It can on low-end devices when used on large or many elements, so use it selectively.

Try it: Glassmorphism Generator — free, runs in your browser, nothing is uploaded.

Originally published at ilovekit.app.