CSS Glass Morphism Generator
Generate copy-ready CSS in your browser.
Generate copy-ready CSS in your browser.
You give it a blur radius and it prints a complete .glass rule: a translucent white background, a faint 1px border, a rounded corner and a backdrop-filter: blur() plus its -webkit- prefixed twin. That combination is what produces the frosted-glass look. The CSS is built by JavaScript on this page and nothing is uploaded.
It is not one property. It is a stack:
| Ingredient | Role |
|---|---|
background: rgba(255,255,255,.18) | Low-alpha tint so the blur is visible through it |
backdrop-filter: blur(12px) | Blurs whatever is painted behind the element |
border: 1px solid rgba(255,255,255,.28) | Catches the light on the edge |
border-radius + soft box-shadow | Sells it as a floating panel |
The effect only reads as glass when it sits over a colorful or photographic background — on a flat white page there is nothing to blur.
Input 12px produces:
.glass {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 16px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}Navigation bars over a hero image, modal and card surfaces on a gradient background, media-player controls, or a login panel over a photo. Keep body text off glass surfaces where contrast is hard to guarantee.
Safari and iOS still need the -webkit- prefix. Shipping both covers Safari plus every Chromium and Firefox build that supports the standard property.
backdrop-filter needs a semi-transparent background to show through, and it needs content behind the element. It is also suppressed inside certain stacking contexts and when a parent has its own filter or transform.
A low-alpha background, an 8–20px backdrop blur, a 1px light border, a soft shadow, and a busy background behind it.
No. The declaration is assembled in your browser.