Glassmorphism CSS Generator — Frosted Glass Effect
Create the frosted-glass (glassmorphism) effect with backdrop-blur and transparency — live preview and copy.
background: rgba(255, 255, 255, 0.15); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter needs the -webkit- prefix in Safari, and has no effect on fully opaque or unsupported backgrounds.
About Glassmorphism CSS Generator — Frosted Glass Effect
Create the popular glassmorphism (frosted glass) effect without hand-tuning CSS. Adjust blur, transparency, tint colour, saturation, border and shadow with sliders and watch the panel update live over a colourful backdrop, so you can see exactly how the blur reads. Copy the CSS when it's right.
The effect relies on backdrop-filter: blur(), a translucent background colour, a subtle light border and a soft shadow. This tool outputs all of those declarations together, including the -webkit-backdrop-filter prefix Safari needs, so it works across modern browsers.
Glassmorphism works best when there's something colourful or busy behind the panel for the blur to sample — over a flat, opaque background the effect is invisible. Use it for cards, navbars and modals layered over images or gradients. Everything is generated locally in your browser.
A frosted card
blur 12px · white tint 15% · border 20%
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.2);
Place it over an image or gradient so the blur is visible.
Frequently asked questions
Why can't I see the blur?
backdrop-filter blurs whatever is behind the element. Over a solid, opaque background there's nothing to blur, so put the panel over an image or gradient to see the effect.
Does it work in Safari?
Yes, but Safari needs the -webkit-backdrop-filter prefix, which this tool includes automatically alongside the standard property.
What makes the glass effect convincing?
A blur, a low background opacity, a slightly brighter thin border to catch the 'light', and a soft drop shadow to lift it off the page. All are adjustable here.
Is backdrop-filter expensive to render?
It can be — heavy blur over large, frequently-repainting areas may affect performance on low-end devices. Use it sparingly on big scrolling regions.