Glassmorphism CSS: How backdrop-filter Frosted Glass Actually Works

The frosted-glass card has been everywhere since Apple leaned into it for iOS Control Center and macOS Big Sur. The look is simple to describe and surprisingly easy to get wrong: a panel that blurs whatever sits behind it, tints that blur a little, and draws a thin bright rim around the edge. When the three pieces are balanced you get glass. When they aren't, you get a plasticky gray rectangle that nobody can read.

This guide breaks the effect down into its three real ingredients, shows the exact CSS that produces it, and covers the two things that quietly ruin glassmorphism in production: readability and performance.

The three layers that make glass

Glassmorphism is not one CSS property. It is three properties working together, and removing any one of them collapses the illusion.

1. The blur comes from backdrop-filter: blur(…). This is the load-bearing line. Unlike filter: blur(), which blurs the element itself, backdrop-filter blurs everything painted behind the element. That distinction is the whole point — the content of your card stays sharp while the background turns soft.
2. The transparency comes from a semi-transparent background color, usually rgba(255, 255, 255, 0.18) for white glass. Without a tint the blur is technically there but the panel reads as a flat smear. The alpha value is what makes it feel like a physical sheet of glass laid over the page.
3. The border is a 1px rgba(255, 255, 255, …) stroke at higher opacity than the fill. Real frosted glass catches light along its edge, and that bright rim is what tells the eye "this is a raised, solid object" rather than a hole punched in the layout.

Add a soft drop shadow and a generous border-radius, and the card lifts off the page.

The CSS, with a real input and output

Here is the canonical white-glass card. These are the exact declarations the Glassmorphism Generator emits when you pick the Apple Glass preset and switch the export tab to CSS:

.glass-card {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Read it top to bottom and the three layers are right there: an 18%-alpha white fill, a 16px backdrop blur (with a saturate bump so colors behind don't go muddy), a 30%-alpha white rim, and a deep shadow. The saturate(160%) is a small trick worth keeping — blurring tends to wash out color, and nudging saturation back up keeps the background lively under the glass instead of gray.

The single most important line in that block is the -webkit-backdrop-filter one above the unprefixed version, and the next section explains why I never ship a glass card without it.

backdrop-filter browser support, straight from MDN

According to MDN's backdrop-filter reference, the property is supported in all current evergreen browsers, but Safari is the catch. Safari shipped backdrop-filter only behind the -webkit- prefix for years, and the unprefixed version did not land until Safari 16.4 (released spring 2023). Earlier Safari and iOS Safari builds — still a meaningful slice of mobile traffic per StatCounter — render nothing at all if you omit the prefix. Not a degraded blur: an entirely transparent rectangle.

MDN's recommended order is prefixed declaration first, unprefixed second, exactly as in the snippet above. The cost is one extra line; the benefit is the card works on a five-year-old iPhone instead of vanishing on it. I treat the two-line pattern as non-negotiable. If you only copy one line out of a generator, copy the -webkit- one — modern Chromium and Firefox tolerate the prefixed form, but old Safari cannot live without it.

Readability: the part designers skip

The first time I shipped a glass hero card, I tested it over a dark navy background where my white title was crisp, called it done, and moved on. Two days later a teammate sent a screenshot of the same card sitting over the bright top of a photo where the title was completely illegible. That was my lesson: glass legibility is not a property of the card, it is a property of the card plus whatever is behind it.

A few rules I now follow:

• Test against the worst background, not the easiest. A white title at 18% tint survives a busy gradient; at 8% tint it turns into a ghost. Always preview your card over the most punishing color range it will actually meet.
• A pure-white background kills the effect. With nothing colorful behind the panel, the blur has nothing to chew on and you are just rendering a faintly transparent box. Either add a gradient or texture, or lean harder on the border (push it to 30–40%) and shadow to define the edge.
• Keep text contrast above 4.5:1. The blur lowers the effective contrast between text and background. Bump the tint alpha until your foreground text clears WCAG AA, then stop. Glass that looks gorgeous and can't be read is a failure, not a style.

Performance: blur is not free

backdrop-filter forces the browser to re-sample and blur a region of the page every frame the card is composited. That is cheap for one static card and expensive for a scrolling list of them. Two failure modes I have hit:

• Stacking heavy blur and heavy saturation. Pushing blur past 24px and saturate past 180% at the same time produces enough overdraw to drop frames on older iPhones during scroll. Pick one axis to be dominant — heavy blur or heavy saturation, not both — and the card scrolls smoothly.
• Blurring large or animated regions. A full-screen glass overlay that animates in will hammer the compositor. Keep the blurred element as small as the design allows, and avoid animating its size or blur radius mid-transition.

When you have the three core properties dialed in, the finishing touches — the lifted shadow and the rounded corners — are what sell the "physical object" feeling. I tune the drop shadow with the CSS Shadow Generator Pro so the elevation reads as soft and deep rather than a hard black line, and round the corners with the Border Radius Generator when a card mixes sharp and rounded sides. If the glass panel also tilts or floats, the CSS Transform Generator handles the perspective and translate values without hand-math.

Wrapping up

Glassmorphism is three honest ingredients — a backdrop-filter blur, a semi-transparent tint, and a bright thin border — plus the discipline to keep text readable and frames smooth. Emit both the prefixed and unprefixed backdrop-filter lines, test against your ugliest background instead of your prettiest, and don't stack maximum blur with maximum saturation. Get those right and the frosted card looks identical to the one in the Dribbble shot, except it works on real browsers with real content behind it.

---

Made by Toolora · Updated 2026-06-13