Glassmorphism CSS Generator
Frosted-glass CSS with live sliders for blur, saturation, transparency, tint, radius and shadow — copy the declarations or a whole .glass-card class rule.
The background is the preview stage — the CSS below is the pane only.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
🔒 Generated in your browser — nothing is uploaded.
What this glassmorphism generator does
Glassmorphism is the frosted-glass look built from a semi-transparent tinted background stacked over a backdrop-filter: blur(), usually finished with rounded corners, a faint light border and a soft drop shadow. Drag the sliders to set the blur radius in pixels, the backdrop saturation, the background transparency, the corner radius and the shadow depth, and pick a tint color. A live preview panel sits over a colorful stage — swap the stage for another gradient, or for one built from plain circles, to watch the blur bend an edge rather than a smooth ramp. Shuffle the glass color or reset every slider at once, and turn the label on the pane off when it is in the way.
The preview is the output
Nothing about the pane is styled twice: the exact CSS printed below the preview is the rule that paints it, so a value that reaches the panel always reaches your clipboard too. The generated code writes the tint as an rgba() background using your color and transparency, a backdrop-filter: blur(Npx) with an optional saturate(), and a matching -webkit-backdrop-filter so the effect also works in Safari and older WebKit browsers. Corner radius is emitted as border-radius, an optional 1px light border adds the glass edge, and the shadow is emitted as box-shadow — with the inset edge highlight as a second layer when you ask for it. Paste the block straight into a class in your stylesheet or an inline style attribute, or switch the output to a complete .glass-card class rule, which also carries the pane's width and height and a ::after sheen a bare declaration list cannot express.
Frequently asked questions
Why does the output include a -webkit-backdrop-filter line?
Safari and some older WebKit-based browsers only recognize the prefixed -webkit-backdrop-filter property. The generator emits both the standard and prefixed versions so the blur renders consistently across browsers.
Why is my glass effect invisible on a plain background?
backdrop-filter blurs whatever sits behind the element, so the frosting only shows when there is content — an image, gradient, or overlapping elements — behind the glass panel. Over a flat solid color there is nothing to blur. The stage behind the preview here is exactly that content, and it is preview-only: it is never part of the CSS you copy.
Does the preview show anything the CSS leaves out?
No, and that is the point. The block under the preview is injected as the rule that paints the pane, so the drop shadow, the edge highlight, the corners and the blur you are looking at are the same declarations you copy. The only thing the preview adds is where the label sits and what colour it is.
When should I use the class-rule output instead of the declarations?
Use the declarations when you are pasting into a class you already have or into an inline style attribute. Switch to the .glass-card class rule when you want the whole component: it adds the pane's width and height and a .glass-card::after sheen — a pseudo-element for the refraction highlight, which a bare list of declarations has no way to express.
Is anything I create uploaded to a server?
No. The preview and the CSS are generated entirely in your browser with JavaScript. Nothing you enter is sent, stored, or uploaded anywhere.