Glassmorphism Generator
Design frosted-glass CSS with live backdrop blur over a busy preview — entirely on this device.
An empty or invalid color keeps the last valid one.
An empty or invalid color keeps the last valid one.
.glass {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(8px) saturate(180%);
backdrop-filter: blur(8px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.7);
}
}Fallback (@supports)
410 B · 14 lines
Do it offline:$ echo '.glass { background: rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }' >> glass.css
How to use it
- Set the backdrop-filter blur and saturation; the preview and the CSS track every change.
- Choose a tint and its opacity; toggle the border, corner radius and drop shadow, each with its own controls.
- Start from the frosted-light, frosted-dark, vibrant or subtle preset when you want a baseline.
- Change the preview backdrop between aurora, mesh and stripes, and view a dark tint over a busy scene before you commit.
- Copy the multi-line or single-line CSS, download a .css file, or share the exact card as a link.
Glassmorphism is a translucent, blurred panel that shows a softened version of whatever sits behind it, so it only reads as glass over a busy backdrop with a see-through background. Set the backdrop-filter blur and saturation, the tint, border, radius and shadow against a live busy preview, then copy CSS that carries an honest @supports fallback for browsers without backdrop-filter. It all runs on this device.
How it works
backdrop-filter blurs and saturates the pixels painted behind the element, not its own content, so it shows only when the background is translucent and something sits behind the card. Turning it on also creates a new stacking context, and the browser re-filters that area on the GPU whenever it changes, so stacked or nested panels cost far more to paint than one.
Two properties carry the effect: -webkit-backdrop-filter comes first for older Safari and iOS, then the unprefixed backdrop-filter last so the standard property wins where both are read. Because the whole effect can be missing, the copied CSS closes with @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))), a block that raises the background opacity — 0.25 to 0.7 on the default card — so overlaid text stays legible with no blur behind it.
Examples
Default frosted-light card — #ffffff tint, blur 8px, saturate 180%.glass {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(8px) saturate(180%);
backdrop-filter: blur(8px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.7);
}
}The card the tool opens with, copied whole — the rule plus the @supports block beneath it. Where backdrop-filter is unavailable the background climbs from 0.25 to 0.7 so overlaid text stays readable.
Vibrant heavy blur — #3b82f6 tint, blur 20px, saturate 200%.glass {
background: rgba(59, 130, 246, 0.2);
-webkit-backdrop-filter: blur(20px) saturate(200%);
backdrop-filter: blur(20px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}The vibrant preset. The hex tint #3b82f6 becomes rgba(59, 130, 246, …); the field also takes rgb(), hsl(), oklch() or a color name, while the slider owns the alpha. Blur 20 and 200% saturation deepen the colors behind the glass.
Frosted-dark on a mesh backdrop — #0f172a tint, fallback 0.8.glass {
background: rgba(15, 23, 42, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(15, 23, 42, 0.8);
}
}The frosted-dark preset over the mesh backdrop. Its fallback opacity is 0.8, above the light card's 0.7, because a dark tint needs more cover once the blur is gone. Check it on the busy preview before shipping.
Edge — blur 0px, saturate 100% (no backdrop effect).glass {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(0px) saturate(100%);
backdrop-filter: blur(0px) saturate(100%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}Both filter lines still print, but at blur 0 and 100% saturation they change nothing, and a chip says so: “backdrop-filter has no visible effect at blur 0px and saturate 100%.”
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
A fully opaque background hides the effect
backdrop-filter can only soften what shows through the card, so a tint at full opacity leaves nothing to blur. Raise the background opacity to 1 and a chip warns: “a fully opaque background hides the frosted-glass effect — lower the background opacity.”
The preview backdrop is scaffolding, not output
The aurora, mesh and stripes scenes exist only to give the blur something to work on. They are pure CSS built into the tool and never appear in the copied .glass rule — you supply the real background.
Safari and iOS still need the -webkit- line
Several WebKit versions ship backdrop-filter only under the -webkit- prefix, so the tool writes both lines, prefixed one first. Check current browser-support tables before you drop either.
The color fields take more than hex
Tint and border color accept hex in 3, 4, 6 or 8 digits, rgb(), hsl(), oklch(), a color name and transparent. An unknown function like color(srgb 1 0 0) is refused rather than half-parsed, so nothing silently changes meaning.
Out-of-gamut oklch clamps to the byte range
A wide oklch tint can name a color outside sRGB. The channels convert and then clip to 0–255 rather than being gamut-mapped, so oklch(0.9 0.4 30) resolves to rgba(255, 0, 0, …) — predictable, if blunt.
Common errors
`#fffg` is not a valid color — expected hex (3/4/6/8 digits), rgb(), hsl(), oklch(), or a CSS color name.- g is not a hex digit. The tint and border-color fields share this validator, and it lists every form it accepts; the card keeps its last good color until the field is fixed.
Color is 257 characters — larger than the 256-character limit for a single color.- One color literal stops at 256 characters, so a runaway paste is refused instead of parsed. The two color fields are the only text inputs here — everything else is a slider or a toggle.
FAQ
Why is there no blur in my preview?
backdrop-filter blurs what is painted behind the card, so a fully opaque tint or nothing behind it leaves nothing to soften. Lower the opacity and keep a busy backdrop; the tool warns once the background is fully opaque.
Do I still need the -webkit-backdrop-filter line?
For older Safari and iOS versions, yes. The generator writes both lines, the -webkit- one first and the standard one last, so current browsers use the unprefixed property and older WebKit still gets the effect. Check today's support tables before dropping either.
What does the @supports block do?
It is the fallback for browsers that cannot do backdrop-filter at all. Since the blur is what separates the card from the page, the block raises the background opacity so overlaid text stays readable without it.
Keyboard shortcuts
- ⌘/Ctrl + C
- Copy the CSS when nothing is selected; typing fields are left alone.
- ⌘/Ctrl + Shift + C
- Copy the CSS even when text is selected.
- ⌘/Ctrl + S
- Save the CSS as a .css download instead of the browser's save-page dialog.
- t
- Switch the color theme; ignored while a control has focus.
- ? or ⌘/Ctrl + /
- Show every keyboard shortcut in an overlay.
- Esc
- Dismiss the open dialog; the card settings are untouched.