Tool · CSS
Glass & grain generator
Glassmorphism fails for two boring reasons: no contrast behind it, and no grain on top of it. Tune both here against a real backdrop, then copy the CSS.
Frosted / 14px
Glass, but earned.
A panel only reads as glass when something worth blurring sits behind it.
Two rules: keep the tint alpha under ~0.15 or the panel turns into frosted plastic, and keep the grain static. Noise that moves costs more battery than the blur you just added.
Why most glass looks cheap
Three things do the damage. A nearly transparent white fill over a low-contrast backdrop, so the panel has nothing to blur. A border brighter than the tint, so the outline carries the whole design. And perfectly smooth gradients, which the eye reads as plastic — real glass has a surface.
The fix is a stack, not a slider: tint for legibility,blur for depth, grain for material, and ahairline border plus a single inset highlight to catch the light. Grain is the cheapest of the four and the one almost everyone skips.
What it costs
backdrop-filter forces the browser to re-sample everything behind the element. On a static page that is nearly free; on a scrolling feed with eight glass cards it is a repaint budget problem, especially on mid-range Android. Keep it to one or two surfaces per viewport, and never put it on a large sticky header above a video.
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(23, 23, 28, 0.9);
}
}The fallback matters more than it looks: without it, every unsupported browser gets a transparent box with unreadable text.
Contrast is a real test
Glass text fails accessibility audits because people measure contrast against the panel's average colour. Judge it against the brightest pixel that passes behind the text — a white logo, a lamp, a highlighted row. If the body text cannot hold 4.5:1 there, raise the tint or move the panel.