Glassmorphism Generator - Free Online Frosted Glass CSS Tool | IconVault
Design frosted glass cards with blur, opacity, border and shadow sliders, preview over live gradients and copy the CSS. Free, runs fully in your browser.
Glassmorphism Generator
Design frosted glass cards and copy the CSS
5 of 5 free copies left - everything runs in your browser.
Frosted glass card
Blur 12px, radius 16px, border 1px
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
About this tool
IconVault's Glassmorphism Generator builds the frosted glass look visually. Drag sliders for backdrop blur, background opacity, border width, color and opacity, border radius and shadow, and watch the card update live over colorful gradient backgrounds (Sunset, Ocean, Candy, Forest).
When it looks right, one click copies production-ready CSS with the backdrop-filter rule, the -webkit-backdrop-filter fallback for Safari, and your exact values. It is free with no signup and runs fully in your browser. The honest caveat: heavy blur values can cost performance on low-end phones, and always provide a readable fallback because backdrop-filter is unsupported in very old browsers.
Frequently asked questions
Popular searches
More tools
Font Pairing
Curated heading and body font pairs with live preview
Font Preview
Preview 200+ Google Fonts with your own text
Gradient Text
Gradient headlines with live preview and CSS
Mesh Gradient
Draggable color pins, layered radial-gradient CSS
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon