Glassmorphism: The Frosted-Glass Design Trend, Explained
Glassmorphism is the frosted-glass panel - translucent, softly blurred, with whatever sits behind it showing through out of focus. It turns up across operating systems and app interfaces, and it comes down to two CSS properties working together. The Glassmorphism CSS Generator assembles them with a live preview.
The two ingredients
backdrop-filter with a blur is the one doing the work. Unlike a normal filter, which blurs the element itself, backdrop-filter blurs whatever is behind it - so the panel stays sharp while its background goes soft.
A semi-transparent background colour sits on top of that blur. Without it the panel is just a blurry window; with it you get the tint that reads as glass. A thin, slightly lighter border along the top edge completes the illusion by suggesting a catch of light.
When it works
It needs something behind it worth blurring. Over a photograph, a gradient or a colourful page, the effect is obvious and attractive. Over a flat white background there is nothing to blur, and all you have built is a slightly grey box.
It also wants restraint. One or two glass panels over a rich background look considered. A page of them turns into soup, because every panel is competing to show you the same blurred thing.
The problem to watch
Readability. A translucent panel means your text sits on a background that changes depending on what is behind it - so text that is perfectly legible over the dark part of a photograph can vanish over the bright part. This is the single most common failure of the style.
The fixes are to keep the background tint opaque enough to even things out, or to accept a darker overlay behind text. Either way, check the worst case rather than the screenshot you happen to have: the Contrast Checker against the lightest region behind your panel will tell you quickly.
How to build one
Open the tool, adjust blur, tint, opacity and corner radius with the sliders, and copy the CSS.
The cost nobody mentions
Blurring a backdrop is genuinely expensive to render. The browser has to sample everything behind the element and blur it, and repeat that whenever anything underneath moves or scrolls. On a desktop you will not notice; on an older phone, a page with several glass panels over a scrolling background can visibly stutter.
Two habits keep it manageable. Use it on a small number of elements rather than as a general surface style, and avoid putting it over content that moves. A glass header over a scrolling page is the single most expensive version of this effect, and also the most popular.
If the page feels sluggish on a phone, this is the first thing to remove and test.
Common questions
Is backdrop-filter widely supported?
It works in all current browsers. Older ones ignore it, leaving a plain translucent panel - which is why the tint matters.
Does it work over a video background?
Technically yes, and it is the heaviest case of all, since the backdrop changes every frame.
What should I do for browsers that do not support it?
Nothing special - they ignore the blur and show the translucent tint, which still looks deliberate. That is why the tint matters.
Build a frosted panel: