Tools · CSS · Glassmorphism generator
Glassmorphism generator
Build a frosted-glass card with backdrop blur, transparency, and a soft border, and copy the CSS.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
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.
Guides
A closer look at specific problems this tool solves.
Why Glassmorphism Falls Apart Without Something Behind It
A frosted-glass panel with nothing behind it to blur isn't glass, it's just a translucent grey box. The whole effect depends on real content sitting behind the element - which is also why it's so easy to get wrong.
Read the guideHow to Build Frosted-Glass CSS (Glassmorphism)
Pick a demo backdrop, tune blur, tint, saturation and border, and copy a real, standards-compliant CSS block. What each control changes and why the demo preview is honestly an approximation.
Read the guideBuilding a Frosted-Glass Navbar That Doesn't Disappear on Old Browsers
A sticky glass navbar over scrolling content is one of the most common real uses of backdrop-filter, and one of the easiest to get wrong on legibility and older-browser fallback both.
Read the guide
Comments