Live
CSS Shadow Generator
Fine-tune box-shadows visually and copy CSS.
Design · Free tool
Glassmorphism Generator
Dial in the tint, blur and saturation on a living frosted-glass panel — then copy the complete backdrop-filter CSS, Safari prefix included.
Make it glassy
Live preview
Glass
How it works
What each knob does
Tint + transparency
The panel is a semi-transparent fill of your chosen color. Low opacity keeps the backdrop visible; higher opacity leans toward a veil.
Blur & saturation
backdrop-filter first blurs what's behind (blur), then pumps up its color (saturate). More blur = denser frosted; more saturation = juicier glow.
Copy the declaration
The output block includes background, border, border-radius and both -webkit- and standard backdrop-filter. Paste it into a panel rule and it just works.
Questions
Glassmorphism FAQ
Why can't I see the blur?
backdrop-filter only shows when there is something colorful behind the panel. If your page behind is flat dark, blur has nothing to frost. Drop a few gradient shapes behind the panel and the effect appears.
Is a -webkit- line still needed?
Modern Safari supports the standard property, but older iOS versions rely on -webkit-backdrop-filter. Emitting both (as this tool does) is the safe path — the browser ignores whichever it does not know.
Will glass hurt performance?
backdrop-filter can be expensive on mobile, especially at large blur. Keep blur modest and panels small. If frames drop, reduce the blur radius or drop the effect behind huge full-screen surfaces.