Surface pattern · updated 3 Sept 2026
Glassmorphism
Glassmorphism is a surface treatment where a panel is translucent and blurs whatever sits behind it, like frosted glass, usually with a thin light border to define its edge. It relies on backdrop-filter, a semi-transparent background colour and something colourful behind the panel for the blur to reveal.
Think of it as
A frosted bathroom window. You can tell there is colour and movement behind it, and the frosting is what makes the pane feel like an object.
Worked example
Our glassmorphism generator produces the three properties that make the effect: a background with alpha, a backdrop blur radius, and a one-pixel border at partial opacity. Remove the colour behind the panel and the same CSS reads as a plain grey card, which is the pattern's dependency in one sentence.
Why it matters
Glass panels are the surface most likely to fail contrast, because the background behind the text is not a colour, it is whatever scrolled under it. A contrast checker cannot answer a question whose background is a moving image; the honest measurement is the worst case, and most implementations never test it.
How it fails
Body text on glass over a photograph, unreadable wherever the photo is light. Blur on a full-width nav that costs frames on every scroll. A border so faint that the panel has no edge on a light background.
What to measure open the decoder →
- The alpha of the panel background and the blur radius
- Text contrast against the lightest and darkest regions of what can appear behind the panel
- Frame cost of the backdrop filter during scroll, which the decoder's motion card hints at through transition counts
Where you meet it
- Operating system chrome
- Music and media players
- Marketing hero cards over gradients
On this site
The generator and the blend-mode explorer build it; the Gradient hub is where the backgrounds it depends on live.
Showcase collections that exhibit it
Build it
Next rung
Glass needs colour behind it. The colour behind it is almost always a gradient, and how gradients are built as material rather than decoration is the next pattern.