About the Glassmorphism Generator
Glassmorphism Generator creates the frosted glass effect in CSS. Move the sliders for blur, transparency, saturation, corner radius and border strength, pick the glass colour and switch the soft shadow on or off, and the preview card updates over a colourful background so you can see exactly how it will look. The page writes the CSS using backdrop-filter and its -webkit- version, a translucent background, a thin light border and an optional shadow, ready to copy into your stylesheet. It runs in your browser and nothing is uploaded.
Updated October 2026
How to use the Glassmorphism Generator
- 1Move the Blur and Transparency sliders until the card looks right.
- 2Adjust saturation, corner radius and border strength.
- 3Pick the glass colour, usually white or a light tint.
- 4Turn the shadow on or off.
- 5Copy the CSS and paste it into your stylesheet.
The ingredients of glass
A glass panel needs four things: a translucent fill so that the background shows through, a blur of what is behind it, a hairline border that catches the light, and a soft shadow that lifts it off the page. This generator exposes each of them as a control, and the saturation slider makes the blurred colours richer, which gives the look of real frosted glass.
Using it well
Glass works best on top of gradients or photos with colourful areas, with a limited amount of text. Keep contrast high for readability and give the panel a clear shape.
- Blur 10 to 20 px suits most cards
- Transparency 15% to 30% for white glass
- Saturation 150% to 180% for richer colour
- Border 20% to 40% for a crisp edge
Fallbacks and performance
If a browser lacks backdrop-filter, the card still shows the translucent colour, so check that text is readable on it. Avoid stacking many blurred layers or animating the blur, which is expensive. If a card sits over a video or animation, give it a bit more opacity.
Related tools
Soften shapes with the Neumorphism Generator, add shadows with the Box Shadow Generator, make backgrounds with the CSS Gradient Generator and check text with the Color Contrast Checker.
Features
- Live preview over a colourful background
- Blur, transparency, saturation, radius and border controls
- backdrop-filter with -webkit- prefix
- Soft shadow option
- Colour picker
- Private: nothing is uploaded
Frequently asked questions
What is glassmorphism?
A design style where panels look like frosted glass: translucent, blurred behind and with a light border, so the background shows through softly.
How is the effect made in CSS?
With a semi-transparent background colour and backdrop-filter: blur(), which blurs whatever is behind the element. A thin light border and soft shadow complete the look.
Why does it only work over a background?
The blur applies to what is behind the element, so you need an image, gradient or colour behind it. On a plain white page the effect is invisible.
Does backdrop-filter work in all browsers?
It works in current Chrome, Edge, Safari and Firefox. Older browsers ignore it, so choose a background colour that is readable without the blur.
Is it good for accessibility?
Text on glass can be hard to read. Keep enough contrast, increase the opacity when text sits over busy images and test with the Color Contrast Checker.
Does blur slow down my page?
Large blurred areas can be heavy on weak devices. Use it on a few cards, not on the entire page, and keep blur values moderate.
How do I make a dark glass card?
Choose a dark glass colour such as black or navy, lower the transparency to about 20% and use light text.
Can I put text on glass?
Yes, and white text with a slight shadow works well on a dark or colourful background. Keep the card opaque enough that the text stays readable over bright parts of the picture.
How do I make the effect on a navigation bar?
Use the same CSS on a fixed header and give it a lower transparency. As you scroll, the content blurs behind the bar, which is a popular look.
Is my design uploaded?
No. The preview and the code are made in your browser.