CSS Glassmorphism Generator
Build the frosted-glass look: adjust the backdrop blur, tint colour, transparency and corner radius, preview it over a colourful background, and copy the CSS (including the `-webkit-` prefix). All in your browser.
- 100% free
- Private & safe
- Runs in your browser
Read our complete guide: CSS Flexbox vs CSS Grid: Complete Cheatsheet & Code Examples
Why use CSS Glassmorphism Generator?
CSS Glassmorphism Generator is a quick, no-nonsense developer utility that runs entirely client-side, so your code and data never leave your machine.
- Runs instantly in your browser — nothing to install, nothing uploaded.
- Completely free, with no account, no watermarks and no usage limits.
- Output: CSS using backdrop-filter
- Set the blur strength and tint colour.
- Works on any device — desktop, tablet and phone — and is fully keyboard accessible.
How to use CSS Glassmorphism Generator
- Set the blur strength and tint colour.
- Adjust transparency and corner radius.
- Preview the glass panel over a gradient.
- Copy the CSS, including the -webkit- prefix.
Examples
- A frosted navigation bar.
- A glass card over a photo.
Supported formats & limits
- Output: CSS using backdrop-filter
Limitations
- backdrop-filter needs a browser that supports it and something behind the element to blur.
Frequently asked questions
Why include -webkit-backdrop-filter?
Some browsers still need the prefixed property, so both are included for wider support.
Why is the blur not visible?
backdrop-filter blurs what is behind the element, so it needs a background behind it to show.
Uploaded?
No — everything runs locally.
Was this tool helpful?
Related tools
CSS Gradient GeneratorDesign linear and radial CSS gradients with a live preview and copy the code.CSS Box Shadow GeneratorCraft CSS box-shadows with offset, blur, spread, colour and inset — live preview.CSS Border Radius GeneratorSet each corner radius independently and copy the CSS, with a live preview.CSS FormatterBeautify and indent minified or messy CSS.