Glassmorphism CSS Generator — free online
You saw that pretty frosted-glass look on a website — a card that's a bit blurry and see-through, sitting over a colourful background — and you wanted it for your own page. But getting the CSS right by hand means guessing at numbers and reloading over and over. We added a free tool that does it for you — Glassmorphism CSS Generator — right in your browser.
What it does
You move a few sliders to set the blur, transparency, tint colour, border, corner radius and saturation. A frosted-glass card updates live on a colourful background, so you see exactly how it looks as you go. When it feels right, you grab the CSS.
Nothing leaves your device
The whole thing runs in your browser. Nothing is uploaded, nothing is saved on a server. You're just playing with sliders on your own screen, and the result stays with you.
How to use it
- Open Glassmorphism CSS Generator and drag the sliders for blur, transparency, tint, border, radius and saturation.
- Watch the card on the colourful background until it looks the way you want.
- Copy the CSS and paste it into your own project.
It's free with no limit. There are more small tools on the Apps page.