The Glassmorphism Generator creates the popular frosted-glass effect used across modern UI design. Adjust the blur, transparency, saturation, tint colour, and border, and watch a glass card update live over a colourful backdrop, then copy the CSS or Tailwind classes.
Glassmorphism combines a semi-transparent background with a backdrop blur so whatever sits behind the element shows through as a soft frost. This tool sets the right combination of background, backdrop-filter, border, and shadow for you. Everything runs in your browser.
How to create a glassmorphism effect
- Set the blur amount — this is the frostiness of the glass.
- Adjust transparency so the background shows through, and tweak the saturation and tint for the glass colour.
- Set the corner radius and toggle the subtle border on or off.
- Copy the generated CSS (or Tailwind classes) into your project.
What makes the glass effect
The effect relies on three things working together: a semi-transparent background colour (so the layer behind is partly visible), a backdrop-filter with blur (which frosts whatever is behind the element), and a subtle light border plus a soft shadow to lift the card off the page. A little extra saturation makes the blurred colours behind look richer, which sells the glassy look.
Important: backdrop-filter needs a backdrop
backdrop-filter only blurs content that is actually behind the element. If you place a glass card on a plain solid background there is nothing interesting to frost, so put it over an image, a gradient, or other content. Also remember that backdrop-filter is not supported by some very old browsers, so provide a readable fallback background where it matters.
Frequently Asked Questions
What is glassmorphism?
Glassmorphism is a UI style that makes an element look like frosted glass — a semi-transparent, blurred panel that lets the background show through softly, usually with a light border and a subtle shadow.
How do I make the frosted glass effect in CSS?
Combine a semi-transparent background (rgba) with backdrop-filter: blur(...) and saturate(...), then add a light border and a soft box-shadow. This tool generates the full CSS for you.
Why is my glass effect not blurring?
backdrop-filter only blurs content behind the element, so it needs something (an image, gradient, or other content) behind it to frost. On a plain solid background there is nothing to blur.
Can I use it with Tailwind?
Yes. Switch the output to “Tailwind” to get backdrop-blur, backdrop-saturate, background, rounded, border, and shadow classes.
Does it work in all browsers?
backdrop-filter works in all current browsers (the CSS includes the -webkit- prefix for Safari), but very old browsers do not support it, so keep a sensible fallback background.