About the Glassmorphism Generator
The frosted panel look rests on one property, backdrop-filter, which blurs whatever is painted behind an element instead of the element itself. Three ingredients make it convincing: enough blur that the background becomes texture rather than detail, a translucent tint so the panel has a surface of its own, and a saturation boost that stops the blurred colours behind it from going flat and grey. All three are exposed here, and the preview sits on a multi stop gradient so you can judge them against real colour rather than a solid block.
A hairline border at slightly higher opacity than the fill is what sells the edge. Without it the panel dissolves into the background wherever the two happen to match in value, which is the most common reason a glass card looks broken on one screenshot and fine on another. The generated rule keeps the -webkit- prefixed copy of the filter, which Safari still needs on older iOS releases.
Two practical limits are worth remembering. The effect only appears when something is actually behind the element, so a glass card on a plain white page shows nothing at all. And backdrop blur is a per frame GPU operation, so a page with a dozen large glass panels will drop frames on low end hardware. Keep the blurred area modest, and verify your text still passes contrast using the Color Contrast Checker.
How to use
- Raise Blur until the backdrop becomes texture, usually somewhere between 8 and 20 pixels.
- Set the tint colour and its opacity. Light tints suit dark backdrops and dark tints suit bright ones.
- Turn the hairline border on so the panel edge stays visible, then copy the rule.
Common questions
- Why is nothing blurred in my page?
- backdrop-filter blurs content painted behind the element. If the parent has a plain background and no image, gradient or overlapping content, there is nothing to blur.
- Which browsers support backdrop-filter?
- All current versions of Chrome, Edge, Firefox and Safari. Safari needed the -webkit- prefix until fairly recently, so the generated rule includes both spellings.
- Does the effect hurt performance?
- It can. Each blurred region is recomposited every frame, so a handful of small panels is fine while full screen glass on a scrolling page is not.
- How do I keep text readable on the panel?
- Raise the tint opacity rather than the blur, and check the label colour against the lightest part of your backdrop rather than against the average.