How to Create Glassmorphism in CSS: The Complete 2026 Guide

Glassmorphism is the frosted-glass look you've seen on Apple's macOS panels, Windows 11 surfaces, and half the dribbble shots from the last few years: a translucent card that blurs whatever sits behind it. It looks expensive and feels modern, and the surprising part is that it takes about five lines of CSS. The hard part isn't the effect itself, it's shipping it without wrecking readability or tanking scroll performance. This guide covers both.

What glassmorphism actually is

Glassmorphism is a visual style defined by four ingredients working together: a semi-transparent background, a background blur, a thin light border, and a soft shadow for depth. Remove any one of them and the illusion breaks. The transparency lets the background show through, the blur turns that background into a soft wash of color, the border catches the light like the edge of real glass, and the shadow lifts the panel off the page.

The single property doing the heavy lifting is backdrop-filter. Unlike the regular filter property, which blurs the element itself, backdrop-filter blurs everything rendered behind the element. That distinction is the whole trick.

The minimal glassmorphism recipe

Here is the smallest amount of CSS that produces a convincing glass card. Drop it on any element that sits over a colorful or image background:

.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.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

That is genuinely the entire effect. Everything from here is about controlling it: tuning the values, making the text readable, and making sure it does not melt slower devices.

Tuning the four ingredients

Background transparency

The alpha value on your background controls how much of the backdrop bleeds through. Around 0.1 to 0.2 reads as light, airy glass. Push it to 0.4 and up and it starts looking like frosted plastic. On dark backgrounds, swap to rgba(255, 255, 255, 0.1) for a luminous panel, or rgba(0, 0, 0, 0.2) for a smoked-glass look.

Blur radius

blur(12px) is a safe default. Below 8px the backdrop is still legible behind the card, which can clutter the design. Above 20px the blur becomes so heavy that the panel reads as opaque and you lose the sense of seeing through to a real background. Match the blur to how busy your backdrop is: busy photos want more blur, simple gradients want less.

Border and highlight

A 1px border at low white opacity simulates the lit edge of glass. For a more premium feel, brighten the top edge where light would naturally hit. A subtle inset highlight sells the realism:

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

Notice the saturate(160%) chained onto the blur. Blurring tends to wash out color, so a saturation boost makes the glass feel vivid instead of muddy. This is the single most overlooked tweak that separates amateur glass from the real thing.

The accessibility trap nobody mentions

Here is where most glassmorphism implementations fall apart. Because the background is transparent, your text contrast changes depending on what scrolls behind the card. Text that passes WCAG contrast over a dark photo can become unreadable the moment a light area scrolls under it. You are essentially layering text over an unpredictable background.

• Keep body text on a more opaque sub-layer, or increase the card background alpha behind text zones so contrast stays stable regardless of the backdrop
• Add a subtle text-shadow (text-shadow: 0 1px 2px rgba(0,0,0,0.4)) to lift light text off bright spots in the backdrop
• Test contrast against the lightest and darkest points the backdrop can present, not just the screenshot you designed against
• Never put long-form reading content on glass; reserve the effect for cards, nav bars, modals, and short labels

If you cannot guarantee a contrast ratio of at least 4.5:1 for body text across every backdrop state, the glass is failing accessibility no matter how good it looks.

Performance: why glass can stutter

backdrop-filter forces the browser to re-sample and blur the pixels behind the element on every frame it changes. On a static card that cost is paid once. But stack five glass panels, animate them, or scroll a glass nav bar over a complex page and the GPU is recomputing a blur of a large region continuously. On lower-end phones this is exactly where you see jank.

• Limit the number of simultaneous backdrop-filter elements on screen; one glass nav and one glass card is fine, a dozen is not
• Keep the blurred element small; blurring a full-screen overlay is far more expensive than blurring a 320px card
• Avoid animating backdrop-filter itself, animate opacity or transform on the glass element instead
• Add will-change: backdrop-filter sparingly and only on elements that genuinely animate, never as a blanket fix

Browser support and the fallback you must write

backdrop-filter is supported in every current major browser, but with two caveats: Safari needs the -webkit- prefix, and Firefox only enabled it by default relatively recently. The real risk is not an old browser, it is the case where the blur silently fails and your text ends up on a near-transparent box with no contrast at all. Guard against it with a feature query:

/* Solid-ish fallback first */
.glass-card {
  background: rgba(30, 30, 40, 0.85);
  border-radius: 16px;
}

/* Upgrade only if the browser supports the blur */
@supports ((backdrop-filter: blur(12px)) or
           (-webkit-backdrop-filter: blur(12px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

This pattern guarantees that browsers without backdrop-filter get a readable, near-opaque card, while capable browsers get the full frosted-glass treatment. Progressive enhancement, exactly as it should be.

Where glassmorphism works and where it does not

Use it for floating navigation bars, modal overlays, notification toasts, media player controls, and hero cards sitting over a photo or gradient. These are short-lived or short-text surfaces where the effect adds polish without hurting reading. Avoid it for dense dashboards, data tables, settings pages, and any screen where users read for more than a few seconds. The effect is seasoning, not the meal.

Conclusion

Glassmorphism is five lines of CSS and a list of things that will bite you if you ignore them. Get the four ingredients right, add the saturate boost, protect your text contrast across every backdrop state, watch the number of blurred layers, and always ship a fallback. Do that and you get the premium frosted-glass look without the readability and performance regrets that sink most attempts.