What Is Glassmorphism? The Frosted-Glass Design Trend Explained

Open the macOS control center, swipe down on an iPhone, or glance at a Windows 11 settings panel, and you'll see it: a translucent card that blurs whatever sits behind it, like frosted glass laid over the rest of the screen. The style has a name — glassmorphism — and unlike most design trends, it's built on one specific, nameable CSS property rather than a vague aesthetic.

The property doing all the work

backdrop-filter: blur() is the entire trick. Applied to an element, it blurs everything visually behind that element — not the element's own content, the content underneath it — while the element itself stays semi-transparent so the blurred backdrop shows through. Pair that with a low-opacity background color and a faint 1px border, and you get the glass panel effect: a shape that clearly reads as sitting above the layer beneath it, rather than just being another flat rectangle on the page.

Why this took until relatively recently to catch on

The visual idea isn't new, but backdrop-filter support in browsers is. Real-time background blurring is computationally expensive — the browser has to continuously re-render a blurred version of everything behind the element as the page scrolls or content changes underneath it, which is a meaningfully heavier GPU task than a normal box-shadow or opacity change. Safari supported it early with a vendor prefix, but Firefox didn't ship unprefixed support until 2022, which kept the effect firmly in "nice on Apple platforms, inconsistent everywhere else" territory for years before it became something developers could rely on across the board.

The three ingredients every glass panel needs

Strip any glassmorphic UI down and it's really just three CSS properties working together. Blur on the backdrop is what sells the "glass" part — too little and it just looks like a slightly transparent box, too much and detail behind it disappears entirely, usually somewhere around 8–20px reads best. Low opacity on the panel's own background color, typically 10–30%, is what lets the blurred backdrop show through instead of being fully hidden. And a subtle border, often a lighter or semi-transparent version of the panel's tint color, is what gives the edge definition — without it, the panel tends to bleed into the background instead of reading as a distinct surface floating above it.

The fastest way to get a feel for how these three settings interact is to adjust them live and watch the panel change in real time, rather than guessing values in a stylesheet and reloading repeatedly.