The craft · Glass

Glassmorphism that stays readable.

Glassmorphism is a panel that looks like frosted glass: partly see-through, with a blur over whatever sits behind it. Done well, it keeps a photograph on screen while the words stay easy to read.

Change the glass

Test Track

Costs from real invoices

Text on glass has to stay readable over the brightest part of the photo behind it, not only the darkest.

Blur 18pxSaturation 135%Panel tint 62%

White text contrastmeasuring

An estimate from the photo's brightest region once the blur and tint are applied. WCAG asks for 4.5:1 on body text.

Drag the sliders. The readout estimates how readable white text stays over the photo’s brightest region.

The CSS

This is the rule our journey cards use, in the order we write it.

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 38%),
              rgba(12,17,30,.62);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .card { background: #10162A; }
}

Both spellings of the blur are written out because Safari still needs the prefixed one. The fallback matters as much: a browser without backdrop-filter gets a solid navy card, so the text still has a clear background.

The rules we follow

• Write both spellings. -webkit-backdrop-filter and backdrop-filter, side by side.
• Give every card a solid fallback inside an @supports block.
• Keep animated parents off the glass. Nothing that animates opacity, filter or transform sits above a glass card, because a moving parent forces the blur to redraw. A card rises by animating itself.
• Move the photo only where there is power to spare. On the home page it drifts slowly, and only on large screens with a mouse. A moving backdrop makes every glass card redraw its blur.
• Turn motion off on request. A visitor’s reduced-motion setting stops the drift and the reveals.

Where glass goes wrong

• Text over the bright part of a photo. Check contrast against the lightest region behind the panel, as the demo above does.
• Too many layers. One level of glass reads as depth. Glass on glass reads as noise.
• Heavy blur on phones. Keep panels few and the radius moderate.

Where you can see it

The home page and the Test Track both use it. The scrollytelling page shows how the cards sit inside a journey.

Questions