Glassmorphism Generator
This free glassmorphism generator builds the frosted-glass backdrop-filter effect with a live preview over a colorful background — tune blur, saturation, tint, border, and shadow, then copy the CSS with the -webkit-backdrop-filter prefix for Safari.
Blur & saturation
Blur
Saturate
Background tint
Tint color
Tint opacity
Border
Width
Color
Opacity
Radius
Shadow
Blur
Spread
Opacity
Glass card
This panel demonstrates the frosted-glass effect over a colorful background — drag the sliders on the left to see how blur, tint, and border change it.
· tint · border
What is glassmorphism?
Glassmorphism is a UI style that mimics frosted glass: a semi-transparent, tinted panel with a blurred background, a thin light border, and a soft shadow that makes it look like it's floating above whatever is behind it. The effect leans on backdrop-filter: blur() — which blurs the content behind an element rather than the element's own content — combined with a low-opacity background color for the tint. This free glassmorphism generator lets you tune every part of that recipe with a live preview and exports ready-to-paste CSS.
How to use this generator
Adjust Blur and Saturate to control how strong and how vivid the frosted look is — more saturation keeps colors from washing out under a heavy blur. Set the Background tint color and opacity for the glass panel's fill, then tune the Border width, color, opacity, and radius for the glass edge. Use the Shadow controls to give the panel lift. Start from a preset or dial in your own values, then copy the CSS output.
Common use cases for glassmorphism
- Cards — stat widgets, pricing cards, or product cards floating over a colorful background or hero image.
- Modals & dialogs — an overlay panel that still hints at the page content blurred behind it.
- Navigation bars — a sticky header or sidebar that stays legible while scrolling content shows through, softly blurred.
- Login & auth forms — a frosted panel over a branded gradient or photo background.
Glassmorphism adds the most visual interest over a gradient, photo, or other busy background — over a flat solid color there's nothing behind the panel to blur, so the effect barely reads.
Safari support and the -webkit- prefix
backdrop-filter has solid support across current Chrome, Edge, and Firefox, and Safari has supported it for years too — but Safari (both macOS and iOS) has historically required the -webkit-backdrop-filter prefix alongside the unprefixed property for the effect to render, and some older Safari versions only understand the prefixed form. This generator always outputs both declarations, prefixed first, so the CSS works the same way in Safari as everywhere else. It's still worth checking real Safari and Firefox ESR builds if your audience skews older, and providing a plain semi-transparent fallback background for any browser that doesn't support backdrop-filter at all.
Pair this with our CSS Box Shadow Generator for more elaborate shadow layering, the CSS Gradient Generator for the background behind the glass, and the CSS Border Radius Generator for the panel corners.
Frequently asked questions
backdrop-filter: blur(), usually paired with a light border and a soft shadow so the panel looks like it's floating above whatever is behind it. It became popular after Apple's macOS Big Sur and iOS design language leaned on the effect for cards, sidebars, and modals.
backdrop-filter: blur(Npx), which blurs whatever is rendered behind the element rather than the element itself. Add saturate() to the same filter to keep the blurred colors vivid instead of washed out, a semi-transparent background color for the tint, a subtle border for definition, and a box-shadow for lift — for example backdrop-filter: blur(12px) saturate(180%); background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
-webkit- prefixed version of backdrop-filter alongside the unprefixed property, and some older Safari releases still need it. Always declare both, with -webkit-backdrop-filter first and the unprefixed backdrop-filter second, which is exactly what this generator outputs.
backdrop-filter has good support in current Chrome, Edge, Safari, and Firefox, but it's not universal — older Firefox releases shipped it behind a flag, and very old browsers don't support it at all. Test your glass panels on real devices and provide a solid-background fallback (a plain semi-transparent color with no blur) for browsers where the property is unsupported, so content stays readable either way.
backdrop-filter only blurs content that is actually behind the element — if the element is on a solid, uncluttered background, or the parent stacking context clips it, there's nothing visible to blur. Make sure the element sits above an image, gradient, or other content, that the parent doesn't have overflow: hidden cutting off the blur region, and that the background color's alpha isn't 0.
