CSS Glassmorphism Generator — Frosted Glass Effect

CSS Glassmorphism Generator — Design the Frosted Glass Effect

Create beautiful glassmorphism (frosted-glass) UI effects with a live visual editor. Adjust the blur, transparency, saturation, border, and corner radius, watch the result update instantly over a colorful background, and copy the ready-to-use CSS. The frosted-glass look popularized by iOS, macOS Big Sur, and Windows 11 is now one click away.

What is glassmorphism?

Glassmorphism is a design style where UI elements look like frosted glass: a semi-transparent background with a blur applied to whatever sits behind it, a subtle light border, and a soft shadow. The key CSS property is backdrop-filter: blur(), which blurs the content behind the element rather than the element itself.

The controls

• Blur: how strongly the background behind the card is blurred (the core of the effect)
• Transparency: the opacity of the glass tint — lower lets more background through
• Saturation: boosts the colors behind the glass for a richer look
• Border radius: rounds the card’s corners
• Border width: a thin light border adds the realistic glass edge
• Tint + dark mode: shift the glass toward a color, or switch to a dark glass variant

Important: backdrop-filter support

• The effect relies on backdrop-filter, supported in all modern browsers
• The generator includes the -webkit-backdrop-filter prefix for Safari
• The element must sit over some content or a background — there’s nothing to blur on a plain white page
• Avoid over-blurring; 8–16px usually looks best

Design tips

• Glassmorphism shines over colorful gradients or photos — try the background presets
• Keep text high-contrast so it stays readable over the blur
• Use it sparingly for cards, navbars, or modals — not entire pages

Privacy

This tool runs entirely in your browser. Nothing is uploaded or stored.