Create beautiful frosted glass CSS effects with customizable blur, transparency, and border settings.
Glassmorphism, that frosted-glass look, relies on a specific combination of background blur, transparency, and subtle borders. This generator lets you tweak all the parameters visually and grab the CSS.
Initializing in your browser…
Visual layout builder for CSS Flexbox and Grid. Toggle between modes, adjust properties interactively, use presets, and copy generated CSS code.
Create stunning CSS gradients with linear/radial/conic types, angle control, position control, multiple color stops, 11 presets, and reverse/randomize features
Design complex box shadows with multi-layer support, inset shadows, visibility toggle, layer reordering, opacity control, and 12 professional presets
You want the frosted-glass card effect over a colourful background and keep getting an opaque grey box instead.
Settings
Blur 12px · Tint rgba(255,255,255,0.15) · Border 1px white 18% · Radius 16px
CSS
.glass {
background: rgba(255,255,255,0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 16px;
}The effect only works when `backdrop-filter` blurs what is *behind* a semi-transparent background, a fully opaque background gives the grey box people get stuck on. The generator pairs a low-alpha fill with the blur and includes the `-webkit-` prefix for Safari, so it actually renders as frosted glass across browsers.
Glassmorphism, that frosted-glass look, relies on a specific combination of background blur, transparency, and subtle borders. This generator lets you tweak all the parameters visually and grab the CSS.
The Glassmorphism Generator builds a single .glassmorphism CSS rule from six live controls and copies it to your clipboard. The frosted-glass look comes from backdrop-filter: blur(Npx) saturate(N%) (emitted twice, once with the -webkit- prefix for Safari), which blurs and re-saturates whatever sits behind the element rather than the element's own content. That is paired with a semi-transparent background color: a hexToRgba() helper splits your chosen hex into R/G/B and re-emits it as rgba(...) at the Background Opacity alpha you set, so the surface stays see-through. A faint 1px solid border at Border Opacity, a border-radius, and a fixed-position box-shadow of 0 8px {Shadow Blur}px 0 over black at Shadow Opacity complete the recipe. Because the effect depends entirely on backdrop-filter, the generated card only looks like glass when it overlaps visible content and its own background alpha is below 1 - the two most common reasons the effect appears to do nothing.
Each parameter maps to a slider with concrete bounds: Blur runs 0-50px, Background Opacity and Border Opacity 0-100%, Saturation 50-200% in steps of 5 (values above 100% richen the blurred backdrop's colors), Border Radius 0-50px, Shadow Opacity 0-50%, and Shadow Blur 0-100px in steps of 5. Glass Color and Border Color each have a native color picker plus a hex text field. Six presets pre-fill these: Subtle (blur 8, 20% opacity), Frosted (blur 16, saturate 120%), Bold (blur 24, saturate 150%), Dark (black glass with a white border), Colorful (a #8b5cf6 violet glass at saturate 180%), and Minimal (blur 4, 10% opacity). A Randomize button rolls fresh values within those ranges, and the full configuration is encoded into the URL via useUrlStates so a Share button produces a link that reproduces the exact card.
A live preview renders your card over one of eight selectable 135-degree linear-gradient backgrounds, layered on top of three soft blurred color blobs so you can actually judge the backdrop-filter against busy content the way it would behave in production. The output is plain hand-editable CSS targeting a .glassmorphism class - no framework or runtime dependency - and the tool surfaces a built-in note reminding you to keep the -webkit-backdrop-filter line for Safari. Worth keeping in mind beyond the generator: light text over a heavily transparent, busy backdrop frequently fails WCAG contrast, so lower opacity is not always better, and backdrop-filter is GPU-heavy and forces a new stacking context, so applying it to many or animated surfaces can hurt rendering performance.
Click the Frosted preset to set blur 16px, 30% opacity, and saturate 120%, then copy the generated .glassmorphism CSS and drop it on a card overlapping the default #667eea->#764ba2 background.
Apply the Dark preset (black glass at 30% opacity with a white 20% border) for a frosted panel that reads well over light or photographic backgrounds.
It works in Chrome, Edge, Safari, and Firefox 103+. Older Firefox versions don't support it, so provide a solid-color fallback.
Backdrop-filter can be GPU-intensive, especially on large elements. Use it sparingly, small cards and modals are fine; full-page overlays can cause frame drops on slower devices.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.