CSS Glassmorphism: A Complete Guide

The frosted-glass UI style, the exact CSS behind it, and the mistakes that break it.

What is glassmorphism?

Glassmorphism is a UI design style that mimics frosted glass: a translucent panel that blurs whatever sits behind it, usually paired with a subtle light border and soft shadow. Apple popularized the look in macOS Big Sur and iOS's Control Center; it's since become a staple of modern dashboards, cards, and navigation bars across the web.

Unlike most CSS effects, glassmorphism only reads correctly over a busy or colorful background — the blur is the whole point, so it needs something behind it worth blurring.

The CSS behind it

Three properties do the work:

backdrop-filter: blur(Npx) — blurs whatever is visually behind the element. This is the property that actually creates the "glass" effect; nothing else on this list does it alone.
A semi-transparent background-color (e.g. rgba(255,255,255,0.2)) — tints the glass and lets the blurred background show through.
A thin, light border (e.g. 1px solid rgba(255,255,255,0.3)) — suggests the edge of a physical glass pane catching light.

Safari needs the -webkit-backdrop-filter prefix alongside the unprefixed property, or the blur silently does nothing.

Building a glassmorphism card, step by step

A minimal glass card:

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

Place it over an image, gradient, or colorful background — over a flat white or black background it will just look like a plain semi-transparent box, since there's nothing behind it for the blur to act on.

Accessibility and performance, honestly

Contrast is the real risk. Text placed directly on a glass panel inherits whatever contrast the blurred background happens to produce at that moment — if the content behind it changes (a photo carousel, a video, user-generated content), your text-to-background contrast can silently drop below WCAG AA. Test with real, worst-case background content, not just your design mockup's placeholder image.

Performance is a real cost, not a myth. backdrop-filter is one of the more expensive properties to paint, especially on scroll or with many glass panels on one screen (a whole grid of frosted cards, for example). On lower-end mobile devices this can visibly drop frame rate. Keep the blurred area reasonably small, and avoid animating backdrop-filter itself if you can animate something cheaper (like opacity) instead.

Common mistakes

No background behind the panel. Without a real image, gradient, or textured background, the blur has nothing to do and the "glass" reads as a flat, slightly-transparent box.
Opacity too high. Above roughly 0.3–0.4 background opacity, the panel stops reading as glass and starts reading as just a solid, slightly-off-color box.
Missing the -webkit- prefix. The effect silently fails in Safari without it — no error, just no blur.
No fallback for unsupported contexts. Wrap the effect in an @supports (backdrop-filter: blur(1px)) query and provide a plain solid-background fallback for the rare case it's unavailable.

Want to build this visually instead of hand-writing the CSS? Try the Glassmorphism CSS Generator →

Frequently asked questions

Is glassmorphism good for accessibility?

It can be, but it requires real testing — because the panel's effective background changes with whatever is blurred behind it, text contrast can't be guaranteed from a static design mockup alone. Test against your actual worst-case background content.

Does backdrop-filter hurt performance?

It can, especially with multiple blurred panels on screen at once or on lower-end mobile devices. Keep blurred areas reasonably sized and avoid animating backdrop-filter directly.

What's the difference between glassmorphism and neumorphism?

Glassmorphism uses translucency and background blur to look like frosted glass; neumorphism uses soft, dual-direction shadows on a flat-colored background to look like the UI is subtly extruded from the surface. They're visually distinct trends that both emerged around the same period.

Can I use glassmorphism without backdrop-filter support?

Wrap it in an @supports (backdrop-filter: blur(1px)) query and provide a plain semi-transparent or solid background as the fallback for browsers/contexts where it's unavailable.