# Glassmorphism web design: where frosted glass works and fails

> What glassmorphism is, the CSS behind it, where it helps and where it hurts legibility, and the rules we follow to keep a glass site readable and fast.

By the Frontier team. Published 2026-10-05, updated 2026-10-05.

Glassmorphism is a visual style where panels look like frosted glass: a translucent fill, a blur of whatever sits behind the panel, and a thin bright edge. On the web it is built with the CSS backdrop-filter property. It works when the background is soft and the glass is used for a few layers that need depth; it fails when text sits on busy, high-contrast imagery or when every element on the page is glass.

That is the short version. The longer version is mostly about restraint, because glass is one of the few styles where the same CSS can look expensive on one page and unreadable on the next. This guide covers the mechanics, the failure modes, the rules we use, and how to make a glass site that still passes contrast checks and respects people who turn transparency off.

## What glassmorphism actually is

The Nielsen Norman Group describes [glassmorphism](https://www.nngroup.com/articles/glassmorphism/) as a style that uses levels of translucency to create depth and contrast between foreground and background, mimicking frosted glass. They also point out that design systems tend to file it under "materials": Microsoft's Fluent calls its version Acrylic. The name is recent; the idea of a blurred, tinted surface floating over content has been in operating system interfaces for years.

Three ingredients make the look:

- A fill that is not fully opaque, usually white or near-black at low alpha.
- A blur (and often a saturation boost) applied to the pixels behind the panel, not to the panel itself.
- An edge: a one-pixel border or inner highlight that catches light, so the panel reads as an object rather than a smudge.

Take away the blur and you have plain transparency, which is where legibility problems start. Take away the edge and the panel melts into the background.

## The CSS: backdrop-filter and its quirks

MDN's reference for [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter) says it applies graphical effects such as blurring or colour shifting to the area behind an element, and that the element or its background must be transparent or partially transparent for the effect to show. It accepts the same filter functions as filter: blur(), saturate(), brightness() and the rest, chained in order.

```
.glass {
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 20px;
}
```

The prefixed line is still worth keeping: MDN's compatibility data lists unprefixed support in Safari from version 18, with the -webkit- prefix before that.

The quirk that catches most people is the backdrop root. MDN explains that backdrop-filter only blurs content up to the nearest ancestor that is a backdrop root, and that an ancestor with opacity below 1, a filter, a mask, a clip-path, a mix-blend-mode or its own backdrop-filter becomes one. So if a parent has opacity: 0.9 or a will-change for opacity, the child's glass blurs only what is inside that parent, and the effect seems to vanish. When glass "does nothing", check the ancestors before the glass.

## Where glass works

Glass earns its place when there is something worth seeing through it and the content on it is short.

- **Navigation over a hero.** A sticky header that blurs the page scrolling under it keeps context without fighting the content.
- **Floating product mock-ups.** An app window, a notification or an approval card sitting over a soft background reads as a layer on top of the world, which is exactly what a product UI is.
- **Overlays and sheets.** Menus, dialogs and cookie banners where the blur says "the page is still there, you are just in front of it".
- **Soft, slow backgrounds.** Gradients, blurred light, slow colour fields. These give the blur something to work with without introducing hard edges behind text.

The common thread is depth with purpose: glass tells the visitor which layer is in front.

## Where glass fails

The failures are predictable, and most are about contrast.

- **Text over busy imagery.** Photographs, video and illustrations with hard edges show through even a strong blur. A heading that passes contrast at the top of the panel can fail at the bottom where a bright patch scrolls under it.
- **Glass on glass on glass.** Stacked translucent layers multiply. Three panels deep, nothing has a clear edge and the page looks foggy.
- **Long reading.** Blog posts, legal pages and docs do not need depth. They need a solid, calm surface.
- **Small, low-weight text.** Thin type loses definition fastest on a translucent fill.
- **Performance.** Backdrop blur makes the browser repaint what is behind the element when that content changes. A few blurred panels are fine; dozens, or large blurred panels over animated video while the page scrolls, can make scrolling uneven on modest hardware. Profile on a mid-range phone, not only on a laptop.

> If the only way to make a glass panel readable is to raise its fill to near-opaque, it should be a solid panel. That is a design decision, not a failure.

## Practical rules we follow

These are the rules we apply when we build glass layouts. None of them are exotic.

1. Design the background first. Glass looks only as good as what is behind it. Soft gradients and slow fields of light beat photographs.
2. Set a minimum fill. Never let the glass go fully clear under text; choose the lowest alpha at which body text still passes contrast against the brightest and darkest point that can sit behind it.
3. Blur generously behind text. A small blur shows shapes through; a larger one turns them into colour.
4. Keep the edge. A light border or inner highlight separates the panel from the background, and helps people with low vision find the panel's boundary.
5. Use glass for layers, not for everything. Hero, header, a few cards and overlays. Long-form content sits on solid surfaces.
6. Keep type weight up. Regular or medium weights for body text on glass; save light weights for solid backgrounds.
7. Test in both themes. Dark glass behaves differently: a faint white tint over a dark base, rather than a dark tint over a dark base, keeps panels visible.
8. Budget the blur. Count blurred elements on a page and avoid animating large blurred regions continuously.

## Accessibility: contrast and reduced transparency

Two checks matter most.

### Contrast

WCAG 2.2's [Contrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum) criterion asks for at least 4.5:1 for normal text and 3:1 for large text, and [Non-text Contrast](https://www.w3.org/TR/WCAG22/#non-text-contrast) asks for 3:1 for the visual parts of controls. On glass you cannot check one colour pair; you have to check the worst case. Measure text against the lightest and the darkest area that can pass behind the panel, including in dark mode. If either fails, raise the fill alpha, increase the blur or move the text.

### Reduced transparency

MDN documents the [prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-transparency) media feature, which detects when someone has turned on a system setting to reduce translucent effects (Windows, macOS and iOS all have one). MDN marks it experimental: its compatibility data lists support in Chromium-based browsers from version 118, behind a preference in Firefox, and not yet in Safari. Use it as progressive enhancement, never as your only safety net.

```
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
```

Because support is partial, the default glass must already pass contrast. The media query then makes it calmer for those who asked; it should not be the thing that makes the page usable. Pair it with [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) if the background moves or the glass reacts to the pointer.

For the wider list of things to check before you trust a template, see our [website template accessibility checklist](blog/website-template-accessibility-checklist.html).

## An example: Tidewell

We have one glass template today: [Tidewell](templates/tidewell.html), a website template for an AI inbox agent that sorts replies, drafts answers, asks before it sends and then books the meeting. Its design is frosted glass over a slow field of light, set in Onest on Sanzo Wada combination 194 (jasper red, seashell pink and Olympic blue). The glass has edge light and pointer parallax.

![The top of Tidewell's Home V1 page in light mode](https://frontiertemplates.com/img/blog/glassmorphism-web-design-1.jpg)

*Tidewell, Home V1, light mode*

The hero shows the product, not a photograph. The home page leads with a working mock-up of the agent's loop, so visitors watch a reply arrive, see the draft and press Approve themselves, and every product visual is editable HTML rather than a screenshot. That matters for glass in particular, because you can change the copy and the styles of a panel and recheck contrast, which you cannot do with a flattened image.

The dark mode, which the template calls night tide, shows rule seven in practice: the glass becomes a faint white tint (rgb 255 255 255 at 0.06 alpha) over a deep #15171c base, so panels stay visible against the dark rather than disappearing into it. Light and dark are separate token sets, and the theme follows the visitor's system setting on first visit.

![The top of Tidewell's Home V1 page in dark mode](https://frontiertemplates.com/img/blog/glassmorphism-web-design-2.jpg)

*Tidewell, Home V1, dark mode*

Tidewell ships as HTML today, with Framer, Webflow, Astro, WordPress and a prompt pack in production. If you want to see more AI product sites in other styles, browse the [AI website templates](collections/ai-website-templates.html) collection, or read how [dark mode for marketing sites](blog/dark-mode-for-marketing-sites.html) should be built.

Template: [tidewell](https://frontiertemplates.com/templates/tidewell)

## When to choose glass, and when not to

Choose glass when your product is a layer on top of something else (an inbox, a browser, a workspace) and you want the site to say so visually, when your hero is a product mock-up rather than a photograph, and when your brand can live with a soft, luminous palette.

Skip it when your site is mostly reading, when your brand imagery is photographic and busy, or when you need the look to stay crisp on low-end devices with heavy animation. A strict grid and solid surfaces, as in [Swiss style web design](blog/swiss-style-web-design.html), give you a sharper, more editorial feel with fewer accessibility trade-offs. Neither is better in general; they suit different products.

Whichever way you go, judge the template on more than its hero. The [complete template checklist](blog/what-a-complete-template-includes.html) covers the pages that decide whether you can launch with it.

Canonical: https://frontiertemplates.com/blog/glassmorphism-web-design