Glassmorphism Generator
Glassmorphism Generator: free, fast and private. Works in your browser, nothing is uploaded, no sign-up needed.
How to use
Glassmorphism is a frosted-glass effect made with a semi-transparent background and a blur of the content behind it. Adjust blur, transparency, saturation, border and corner radius over a colorful backdrop, then copy the CSS. It works best over images or gradients.
- Pick or enter a color.
- Adjust the options and watch the live preview.
- Copy the color or CSS code.
More tools
Frequently asked questions
Which CSS creates the glass effect?
backdrop-filter: blur() combined with a semi-transparent background color. Add the -webkit- prefix for Safari.
Does it work in all browsers?
backdrop-filter is supported in all modern browsers. Older browsers show a plain semi-transparent box.
Is it free?
Yes. All tools are free, with no sign-up and no limits.
Is my image or data uploaded?
No. Everything runs locally in your browser, so your images and colors stay private.
Can I use the generated CSS in my projects?
Yes. The code is yours to use in personal and commercial projects without attribution.