Generate frosted-glass CSS effects with live preview. Adjust blur, opacity, saturation, and border instantly. No data leaves your browser.
More free utilities you might find useful
Quick answers to common questions
The core stack is backdrop-filter: blur() (plus saturate for richer frosted look), a semi-transparent background (often rgba), and a subtle light border. Always include -webkit-backdrop-filter for Safari.
Backdrop filters blur whatever is behind the element. On a flat solid page there is little to see. Place the glass card over images, gradients, or busy UI.
Yes for common blur steps (backdrop-blur-sm, md, lg). Custom blur, opacity, and saturation often use arbitrary values like backdrop-blur-[16px]. Extend theme.backdropBlur if you reuse sizes often.
No. Preview and CSS generation run entirely in your browser.
Your data is processed entirely in your browser. Nothing is sent to any server.
Presets
Frosted glass
Live preview over a gradient background
CSS
/* Glassmorphism */ background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.40); border-radius: 20px;
backdrop-filter has excellent modern browser support but check caniuse.com for your target browsers.
No data leaves your browser — this tool doesn't even need internet after loading.