Glassmorphism Generator
The Glassmorphism Generator creates the frosted-glass effect with CSS backdrop-filter, letting you adjust blur, background opacity, saturation, border opacity, radius and tint color with a live preview.
About this tool
The Glassmorphism Generator creates the frosted-glass effect with CSS backdrop-filter, letting you adjust blur, background opacity, saturation, border opacity, radius and tint color with a live preview.
How to use it
- Pick the glass tint color.
- Adjust blur, opacity and saturation.
- Set the border opacity and border radius.
- Click Copy CSS.
Good to know
- The effect uses backdrop-filter: blur() saturate(), which blurs whatever is behind the element.
- A semi-transparent background (rgba) is needed, otherwise the blur is hidden.
- The generated CSS includes the -webkit-backdrop-filter prefix for Safari.
- Glass works best over colorful or image backgrounds; on flat colors the blur is not visible.
- Keep text contrast in check — translucent panels can drop below WCAG contrast over busy backgrounds.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I make a glass effect in CSS?
Give the element a semi-transparent background, such as rgba(255,255,255,0.15), and backdrop-filter: blur(12px); this tool writes the full rule.
Why is my backdrop-filter not working?
The element needs a transparent or semi-transparent background, and there must be something behind it to blur. Safari also needs the -webkit- prefix.
Is glassmorphism accessible?
It can be, if text keeps sufficient contrast. Test text colors over the busiest part of the background.
Does backdrop-filter hurt performance?
Blurring is GPU-intensive, so avoid applying it to very large areas or many elements at once, especially on low-end phones.