How to use the Glassmorphism Generator
- 1. Adjust the glassMove the blur, fill transparency, border and saturation sliders.
- 2. Check the lookThe preview card sits over bright shapes so you see the effect clearly.
- 3. Copy the CSSPress Get CSS. The code includes the -webkit- version for Safari.
How the glass effect works
Glassmorphism uses backdrop-filter: blur(), which blurs whatever is behind an element, not the element itself. Combine it with a mostly transparent background colour and a thin, lighter border, and the card looks like frosted glass. A saturate() value above 100% makes colours behind it look richer through the glass.
The effect only appears when there is something colourful or detailed behind the element, such as a photo, gradient or blobs of colour. On a plain white page, a glass card just looks pale.
Worked example and accessibility
The defaults give this background: rgba(255, 255, 255, 0.18), which is white at 18% fill. They also give backdrop-filter: blur(12px) saturate(160%), a 1px border of white at 30%, a 16px radius and a soft shadow. Raise the fill to 40% for more readable text; drop the blur to 4px for a clearer, more transparent glass.
- Contrast first: text on glass can become hard to read where the background is bright. Test with your real background image.
- Performance: large blurred areas are heavier for phones to draw. Use the effect on cards and navbars, not whole pages.
- Support: backdrop-filter works in current Chrome, Edge, Firefox and Safari. Older browsers simply show the semi-transparent colour, which is a fine fallback.
Frequently asked questions
Why can't I see any blur?
There must be something behind the element. Put the card over an image or gradient.
Why are there two backdrop-filter lines?
Safari used the -webkit- prefixed name for a long time. Keeping both covers more devices.
Can I use a dark glass?
Yes. Pick a dark tint colour and keep the fill around 20 to 40%.
Is the generator free?
Yes, free to use. The first copy asks for your name and WhatsApp number once; after that every Uncodemy tool is open to you.