What Is Glassmorphism, and Should You Use It?

What it is

Glassmorphism describes panels that behave like frosted glass. Four ingredients produce the effect: a background with some transparency, so the content behind shows through; a blur applied to that background, so what shows through is diffused; a thin, lighter border that catches the light at the edge; and a backdrop with enough colour or imagery for the translucency to be visible at all. Add a soft shadow to lift the panel, and the result is the look Apple has used across macOS since 2020 and iOS for longer, and which Microsoft adopted in Windows 11 as Mica and Acrylic.

It succeeded neumorphism as the fashionable depth effect around 2021, and unlike neumorphism it has lasted, because at its best it solves a real problem: keeping context visible while a panel floats above it.

The CSS

The core is one property:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

backdrop-filter is supported in all current browsers; the -webkit- prefix is still needed for Safari. The saturate() step lifts the colours behind the panel so the glass reads as bright rather than grey. Provide a fallback with a more opaque background for the rare environments without support, and for the reduced-transparency accessibility setting, which prefers-reduced-transparency exposes in newer browsers.

Where it works

Floating navigation and toolbars over scrolling content, where the blur keeps a hint of what is underneath and the bar stays legible.

Cards over rich imagery, such as a hero with a photograph behind a glass panel holding the headline.

Dialogs and sheets where the dimmed, blurred page behind maintains context.

Widgets and overlays on colourful, abstract backgrounds where the effect can be seen and the content behind is not text.

The pattern in each case: a few elements, floating, over a backdrop that is designed for them.

Where it fails

Text over unpredictable backgrounds. The contrast between text and a translucent panel depends on whatever scrolls behind it. Body text that passes contrast requirements over a dark photograph fails over a light one. WCAG requires the contrast to hold in every state, which glass cannot guarantee without a more opaque panel, which is no longer glass. Our notes on accessible contrast apply with force here.

Whole layouts. Glass on glass on glass produces a muddy, low-contrast interface where nothing is clearly separated. The effect depends on scarcity.

Performance. backdrop-filter is one of the most expensive effects a browser can render: every pixel under the panel is re-sampled and blurred, on every frame, whenever anything moves. On a desktop it is fine. On a mid-range phone, a glass navigation bar over a scrolling page produces dropped frames, and several glass panels produce a sluggish interface and a warm device. Large blur radii and large panels are worst.

Motion sensitivity. Blurred content moving under a panel is a known trigger for visual discomfort, and both Apple and Windows offer a reduce-transparency setting for exactly this reason. Respect it.

Flat, plain backgrounds. Over white, the effect is invisible and the panel is just a slightly grey box. Glass needs something behind it.

Rules for using it well

• Few elements. One or two glass surfaces on a screen, not a system of them.
• Design the backdrop. Control what sits behind the glass so contrast is predictable: a gradient, an image with a dark region, a dimmed layer.
• Keep text off it where possible, or use large, bold text with a stronger panel opacity behind it, and test contrast against the lightest and darkest backdrops it will meet.
• Moderate the blur. 8–20 pixels reads as glass; more costs performance for no visible gain.
• Respect prefers-reduced-transparency and prefers-reduced-motion by switching to a solid panel.
• Test on a real mid-range phone while scrolling. If it stutters, reduce the panel size or the blur, or drop the effect on small screens.
• Do not use it for the brand. It is a treatment, not an identity, and like every treatment it will date; trends that stick tend to be the ones used sparingly.

The decision

Use glassmorphism as a highlight: one floating element that benefits from showing what is behind it, over a backdrop you control, with a solid fallback. Avoid it as a system, over body text, or on interfaces whose users are on ordinary phones. Used that way it still looks as good as it did when Apple made it fashionable; used the other way it is the reason a site feels slow and hard to read. If you would like a design reviewed for where its effects are costing more than they add, book a call.

Common questions