Developer Essentials · Free Tool
Glassmorphism Generator
Design frosted-glass UI cards with live preview — tune blur, transparency, saturation and border — and copy the CSS. Runs entirely in your browser.
Glass card
Blur
Transparency
Saturation
Corner radius
Border opacity
Tint colour
CSS
How it works
Glassmorphism layers a translucent fill over a blurred view of whatever sits behind it. The magic is backdrop-filter: blur() saturate(), which samples and blurs the background; a semi-transparent background and a faint light border complete the frosted look. Note backdrop-filter needs the -webkit- prefix in Safari — both are included in the output.