Glassmorphism CSS Generator
Tune blur, saturation, opacity, radius and shadow, preview live and copy the CSS.
How to Use
- Move the sliders
Background blur is usually 12 to 20 pixels, saturation of 180% keeps colours lively, and fill opacity sits best between 10% and 30%.
- Watch the preview
The preview sits on a purple-to-pink gradient so you can compare settings side by side at a glance.
- Copy the CSS
Once it looks right, copy the code box and rename .glass-panel to whatever your project uses.
FAQ
Why does my card show no blur?
Nine times out of ten there is nothing behind it. backdrop-filter samples the pixels behind the element, and against a flat background blurring changes nothing, so it looks broken. Put an image, a gradient or anything with detail behind it. Also check that no ancestor sets a filter or backdrop-filter of its own, and that the browser supports the property at all.
How well do Firefox and Safari support it?
Firefox only supports backdrop-filter from version 103; earlier versions fall back to a plain translucent block — usable, but without the frosted look. Safari needs the -webkit-backdrop-filter prefix, and the generated code includes both so Safari works as is. Edge, Chrome and Opera have supported it fully since version 76.
What fill opacity should I use?
Ten to thirty percent is the usual range. Too low mixes text into the background and hurts readability; too high removes the frosted effect entirely. White fill over a dark backdrop, black fill over a light one, gives the best contrast and is the most common pairing.
Are the border and shadow required?
Not strictly, but without them the edge blurs into the background. The layering of glassmorphism comes mainly from a translucent light edge at 20–40% opacity plus a very soft shadow, and those two steps are what turn a translucent block into a pane of glass.