Where glass physically makes sense
Glass in UI works when the metaphor holds: something is *on top of* something else, and the user benefits from seeing the underneath through the top. Three cases earn it. Floating navigation over scrolling content: the nav stays legible while the page moves under it — glass is the excuse for a bar that is not opaque. Modals and sheets over a busy backdrop: the blur keeps the page present enough for context but quiet enough for focus — glass is focus management. And media surfaces over imagery: a caption bar over a photo, a control bar over a video — the image stays visible, the control stays readable.
Blur the background 8–16px and put the text over it. If the text needs extra shadow, a darker scrim, or a higher blur to pass contrast, the glass is decorative — make the panel opaque or nearly so. Glass must earn its translucency with legibility it does not have to cheat for.
Where glass is camouflage
- Over flat colour: blurring a flat background produces nothing but a muddy tint — if there is nothing behind the glass, there is no reason for the glass.
- Over text the user needs to read through: glass over a paragraph is a readability tax on whatever is beneath.
- As a card style on a page with no layering: glass implies depth; a page of floating panels with nothing beneath them reads as indecision.
- Where backdrop-filter costs frames: every blurred layer repaints as content scrolls beneath it — on low-end devices a hero with a blurred scrim can drop the scroll to jank. If you cannot hold 60fps with the blur, the glass is too expensive for its job.
The recipe that behaves
.glass {
background: rgb(255 255 255 / .55); /* tint first */
backdrop-filter: blur(14px) saturate(1.4); /* blur second */
border: 1px solid rgb(255 255 255 / .35); /* edge light */
box-shadow: 0 8px 32px rgb(0 0 0 / .12); /* separation */
}
@supports not (backdrop-filter: blur(1px)) {
.glass { background: rgb(255 255 255 / .92); } /* fallback */
}