Glassmorphism generator

backdrop-filter is the CSS property that creates the frosted-glass effect. Unlike filter, which blurs the element itself, backdrop-filter blurs only what is rendered directly behind the element. Without it you just get a flat semi-transparent panel — the blur is what sells the "glass" look, so a colourful or busy background underneath is essential.

Safari (on both macOS and iOS) historically required the vendor-prefixed -webkit-backdrop-filter to apply the blur. This generator always outputs both the standard and the prefixed property so your glass cards render correctly across Chrome, Edge, Firefox and Safari without you having to remember the prefix.

backdrop-filter is supported in all current major browsers, but it can be disabled in power-saving modes or unavailable on very old versions. Because the snippet also sets a semi-transparent background colour, the card degrades gracefully to a plain translucent panel if the blur is unavailable — nothing disappears.

No. Every slider, colour value and the CSS output are computed entirely in your browser with JavaScript. Nothing is uploaded, logged or stored. You can copy the snippet and close the tab, and no trace of your design leaves your device.

Translucent cards inherit colour from whatever sits behind them, so contrast can shift as the background changes. Raise the background opacity a little, add a soft drop shadow for separation, and pick a text colour with strong contrast. For dark backgrounds, switch the card tint to a dark slate so light text stays legible.