Glassmorphism in web design: when frosted glass works, and when it fails

Where the look comes from

Translucent, blurred surfaces have been part of operating systems for years: Windows Vista's Aero glass, the blurred panels Apple introduced in iOS 7, Microsoft's Acrylic material in its Fluent design, and macOS's translucent sidebars. Apple took the idea furthest with Liquid Glass, introduced across its platforms in 2025. On the web, the name glassmorphism caught on around 2020, when the CSS backdrop-filter property became widely usable and designers began sharing frosted cards over colourful gradient blobs.

In an operating system, glass has a job: it keeps you aware of what's behind a panel, such as the window under a menu, while bringing the panel forward. Many web versions keep the look and lose the job.

The recognisable traits

• A semi-transparent fill, usually white or black at 10 to 40 per cent opacity.
• A background blur on whatever sits behind the panel.
• A thin, light border, often semi-transparent white, catching the "edge" of the glass.
• A soft shadow to separate the panel from the background.
• A colourful or photographic background, without which there's nothing to blur.

The CSS

The core is a few lines: background: rgb(255 255 255 / 0.18); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgb(255 255 255 / 0.3);. The backdrop-filter property is supported in current major browsers; older versions of Safari needed the -webkit-backdrop-filter prefix, so it's still common to include both.

Always write a fallback. Wrap the glass styles in @supports (backdrop-filter: blur(1px)) and give the default panel an almost opaque fill, such as white at 92 per cent, so that where blur isn't available the text stays readable. Some browsers also support a prefers-reduced-transparency media query; where it's available, use it to switch panels to solid fills for people who have asked their system for less transparency.

Where it fails: contrast

Glass's central problem is that the panel's colour depends on what's behind it. Text on a frosted panel over a dark part of a photo might reach 8:1; scroll a little, and the same text over a bright sky might drop to 2:1. WCAG 2.2 requires 4.5:1 for body text, and there's no way to guarantee it when the background moves or varies.

1. Make the fill more opaque where text sits. Blur alone doesn't create contrast; a stronger tint does.
2. Blur harder. A larger blur radius flattens the background toward an average colour, making contrast more predictable.
3. Control the background. Glass over a soft, known gradient or a dark, low-detail image is far safer than glass over user photos or busy pages.
4. Keep text short on glass: a label, a price, a button. Paragraphs belong on solid surfaces.
5. Test the worst case. Scroll every glass panel over the brightest and busiest part of what can sit behind it, and measure there.

Other costs

• Performance. Background blur is expensive to draw, particularly on lower-end phones and when large panels move or overlap. Several stacked glass layers can make scrolling stutter.
• Weak boundaries. Translucent buttons and fields can be hard to see as controls; under WCAG 2.2 their visual boundary needs 3:1 against the background.
• Printing and forced colours. Glass effects disappear in print and in high-contrast modes, so the page must make sense without them.

When it works

Glass earns its place on small, functional surfaces: a sticky header that lets the page show faintly through as you scroll, a floating player or toolbar over a photo, a modal over a dimmed page. Dark interfaces such as dashboards and media apps suit it well, because a dark tint with light text holds contrast more reliably over most content. As a decoration on every card of a marketing page, it mostly costs readability for little gain. For the related soft-shadow style, see neumorphism.

Glassmorphism and Anticode

None of Anticode's seven design systems is a glass style. They separate surfaces with solid fills, borders and contrast, which keeps text readable without depending on what's behind it. The one functional use is the kind described above: in most systems the sticky header is a nearly opaque bar with a light background blur. If you want a frosted look on a design-engine page, there's no setting for it.

The closest thing is the Tallyhaus template, a personal finance dashboard designed and written by Anticode's model with a dark glass look. It's an app, so it runs in Anticode's sandbox: no network, with figures shown as labelled demo data rather than your real accounts. Using it copies it into your project without a model call, and you can then ask for changes in words. Check its contrast yourself after any change to colours or backgrounds.

Questions people ask

Is glassmorphism accessible?

It can be, with an opaque enough fill, a strong blur, a controlled background and short text. Over busy or changing backgrounds it usually fails contrast.

Why isn't backdrop-filter working?

The element needs a semi-transparent background for the blur to show through, and older Safari versions need the -webkit- prefix. Also check that nothing behind it is in a separate stacking context that the filter can't see.

Is glassmorphism still in style?

Translucency is very much part of current operating system design. On the web, use it for function, such as headers and overlays, rather than as a decoration on every card.

Sources

1. backdrop-filter, MDN Web Docs, checked 24 October 2026