Glassmorphism Generator
Design frosted-glass card effects with blur and transparency and copy the CSS — including the contrast problem the style creates.
A glass panel has no contrast of its own
The defaults above are a white tint at 0.15 opacity — the standard glass look.
Composite that over a background B and the panel becomes
0.15·white + 0.85·B, so the contrast
of white text sitting on it is decided entirely by whatever happens to be behind it — the one
thing this generator does not control:
| Behind the card | Contrast of white text | Verdict |
|---|---|---|
#000000 | 15.08:1 | passes AAA |
#404040 | 6.62:1 | passes AA |
#808080 | 3.07:1 | fails AA |
#c0c0c0 | 1.65:1 | fails AA |
#ffffff | 1.00:1 | fails AA |
One card, one set of CSS, and the verdict swings from comfortably AAA to unreadable. Sampling
the whole sRGB cube at this opacity, 75% of
possible backgrounds fail the 4.5:1 threshold for white text, and it starts failing
at a background grey of #5f5f5f — still
fairly dark. Anything lighter than that behind the card and the text is out of compliance.
Turning the opacity up makes it worse
The instinct when text looks washed out is to make the panel more solid. With a white tint that is the wrong direction:
| Opacity | Contrast range | Backgrounds failing AA |
|---|---|---|
| 0.1 | 1.00 – 17.49 | 71% |
| 0.15 | 1.00 – 15.08 | 75% |
| 0.2 | 1.00 – 12.63 | 80% |
| 0.3 | 1.00 – 8.52 | 89% |
| 0.5 | 1.00 – 3.98 | 100% |
| 0.7 | 1.00 – 2.11 | 100% |
More opacity pushes a white panel toward white, and white text on white is 1:1 whatever is behind it. Past 0.5 there is no background anywhere in sRGB that rescues it — the best case the panel can reach has already dropped below the threshold.
The fix is the tint, not the transparency
The identical compositing arithmetic with a black tint runs the other way:
| Black panel opacity | Contrast range | Backgrounds failing AA |
|---|---|---|
| 0.2 | 1.61 – 21.00 | 44% |
| 0.4 | 2.85 – 21.00 | 19% |
| 0.6 | 5.74 – 21.00 | 0% |
| 0.8 | 12.63 – 21.00 | 0% |
A dark panel at 60% opacity carries white text over every background in the colour space, and it is every bit as translucent as the white one. So the problem was never transparency — it was pairing a light tint with light text and letting the page behind decide the outcome. The rule that falls out is symmetric: dark glass under light text, light glass under dark text. A white panel at 0.6 is equally safe if the text on it is black.
None of this is affected by the blur. backdrop-filter smears the background but
does not change its average brightness much, so a blurred light background is still a light
background. Blur hides the texture that made the contrast problem obvious, without fixing it.
How to use
- Set the blur, transparency and border.
- Preview it over a real background, not a flat colour.
- Check text contrast at the busiest part of the background.
- Copy the generated CSS.
Frequently asked questions
How does the frosted glass effect work?
With backdrop-filter, which blurs whatever sits behind an element rather than the element itself. The element must be partly transparent for the effect to be visible, and a subtle light border sells the illusion of a glass edge.
What is the accessibility problem with this style?
Contrast. Text sits over a blurred but still variable background, so the contrast ratio changes across the element and cannot be checked as a single pair of colours. Glassmorphism looks excellent in a mockup over a chosen background and frequently fails against real content.
How do I make it accessible?
Reduce the transparency until the text meets contrast requirements at the worst point of the background, or add a solid layer behind the text specifically. The frosted look survives a good deal less transparency than designers usually assume.
Does backdrop-filter cost performance?
Blur is among the more expensive operations a browser performs, and applying it over a large area or animating it can cost real frame time on modest hardware. A static card is fine; a full-screen animated frosted overlay is where it becomes noticeable.
Does it work everywhere?
In current browsers, yes, and it degrades to a plain translucent panel where it does not. That fallback is worth checking, because a design relying on the blur for legibility can become unreadable when only the transparency applies.
Is the style still current?
It has had a strong run and is firmly associated with a particular period of interface design. It works well used sparingly for a floating panel, and it dates a design when applied to everything.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.