Home / Design / Glassmorphism Generator
Glassmorphism Generator
Tune blur, transparency and border for a frosted-glass card over any background, then copy the CSS.
Frosted glass
Content stays readable while the background shows through softly.
Getting it right: glass only looks like glass over something colourful or detailed — on a flat background it just looks grey. Keep text contrast high (white text on a darker tint, or dark text on a light one). backdrop-filter works in every current browser; the -webkit- line keeps older Safari versions happy.
About the Glassmorphism Generator
The Glassmorphism Generator creates the frosted-glass effect — a translucent card that blurs whatever is behind it. Tune blur, transparency, saturation, border, radius, shadow and tint, preview it over your own background image, and copy the CSS for modern cards, navigation bars and overlays.
How to use the Glassmorphism Generator
- Adjust blur, transparency and saturation.
- Set the border, corner radius, shadow and glass tint.
- Upload your own background to preview it.
- Copy the CSS.
Frequently asked questions
What is glassmorphism?
A design style that uses semi-transparent, blurred panels so the background shows through softly, like frosted glass.
Which CSS property creates the blur?
backdrop-filter: blur() blurs whatever is behind the element, while a semi-transparent background colour gives the glass tint.
Is glassmorphism accessible?
Make sure text on the glass has enough contrast. A slightly stronger tint or less transparency keeps it readable over busy backgrounds.