Tools · CSS · Glassmorphism generator
Glassmorphism generator
Build a frosted-glass card with backdrop blur, transparency, and a soft border, and copy the CSS.
Runs fully in your browser. Nothing is uploaded.
Your file is ready.
Try a different file, or try again.
How it works
Adjust the blur, tint color, background opacity, and saturation.
Fine-tune the border opacity and corner radius for depth.
Copy the finished CSS, including the backdrop-filter property.
Frequently asked questions
The effect relies on backdrop-filter, which some older browsers don't support. Where it's missing, the preview shows the tint without the blur, but the copied CSS is unaffected and still correct.
Either. backdrop-filter blurs whatever sits behind the element: an image, a gradient, or another color.
The generated CSS includes the -webkit-backdrop-filter prefix alongside the standard property.
No. Everything runs in your browser.
Comments