What is glassmorphism in CSS?

Glassmorphism is a UI design trend using backdrop-filter:blur() to create a frosted-glass visual effect on elements placed over colorful or gradient backgrounds. The effect combines a semi-transparent background, a backdrop blur, and a subtle border to simulate the look of frosted glass.

How do I make a glassmorphism card in CSS?

Use backdrop-filter:blur(10px), background:rgba(255,255,255,0.1), border:1px solid rgba(255,255,255,0.18), and border-radius:16px. Add -webkit-backdrop-filter for Safari support. The element must be placed over a colorful or gradient background for the effect to be visible.

Does glassmorphism work in all browsers?

backdrop-filter is supported in Chrome 76+, Firefox 103+, Safari 9+ (with -webkit- prefix), and Edge 79+. For older browsers, the element falls back to its background-color without the blur effect. Always include both backdrop-filter and -webkit-backdrop-filter for maximum compatibility.

CSS Glassmorphism Generator

Backdrop Blur 10px

Background Opacity 10%

Saturation 100%

Border Opacity 18%

Border Radius 16px

Shadow Depth 32px

Card Tint

Border Tint

Background

✦ Premium

Glassmorphism Card

Adjust the sliders on the left to customize this glass card in real time. Copy the CSS when ready.

12.4KUsers

4.9★Rating

FreeForever

How to Use the Glassmorphism Generator

Choose a Preset

Start with one of the six presets — Frosted White, Dark Glass, Neon Purple and more.

Adjust the Sliders

Fine-tune blur, opacity, saturation, border and radius. The preview updates instantly.

Pick Your Colors

Use the color pickers to set the card tint and border tint to match your brand palette.

Choose a Background

Select a preview background to see how the glass effect looks on different gradients.

Copy the CSS

Click "Copy CSS" to copy production-ready code including the -webkit- prefix for Safari.

Paste and Done

Apply the class to any element in your HTML. The glassmorphism effect works on any tag.

Browser Compatibility

🌐

Chrome

Fully supported (76+)

🦊

Firefox

Fully supported (103+)

🧭

Safari

-webkit- prefix (9+)

🔵

Edge

Fully supported (79+)

📱

iOS Safari

-webkit- prefix

🤖

Android Chrome

Fully supported

The generated CSS always includes both backdrop-filter and -webkit-backdrop-filter for maximum browser coverage.

Frequently Asked Questions

What is CSS glassmorphism?

Glassmorphism is a UI design trend that uses backdrop-filter:blur() to create a frosted-glass visual effect. Elements appear to be made of frosted glass when placed over colorful backgrounds. The style became popular in 2020 with Apple's macOS Big Sur design language and has remained a dominant UI pattern through 2026.

What CSS properties create the glassmorphism effect?

Four properties work together: backdrop-filter:blur(Xpx) blurs everything behind the element. background:rgba(r,g,b,alpha) adds a semi-transparent color tint. border:1px solid rgba(255,255,255,opacity) adds the subtle edge highlight. border-radius rounds the corners. The element must be positioned over a colourful or gradient background — glassmorphism is invisible on a plain white or black background.

Does glassmorphism affect performance?

backdrop-filter triggers GPU compositing for the affected element, which means it runs off the main thread and does not block scrolling. However, applying backdrop-filter to many elements simultaneously — or to large-area elements — can cause frame drops on lower-powered devices. Best practice: use glassmorphism on a limited number of key UI elements (modal, card, navbar) rather than on every element on the page.

Why can't I see the blur effect in my browser?

The most common reason: the element has no colourful content behind it. Glassmorphism requires a visually rich background (gradient, image, or other colored elements) to be visible. A glass card on a plain white background looks like a white card with no visible blur. Place your glass element over a gradient background or other colored content. Also verify you have included -webkit-backdrop-filter for Safari support.

What blur value should I use for glassmorphism?

4-8px for a subtle, refined effect (works well for navbars and small cards). 10-16px for the standard frosted glass appearance (cards, modals). 20-40px for a heavy frosted glass effect (full-screen overlays, dramatic modals). Values over 40px are rarely used — they make the content behind the element completely unrecognisable, which removes the visual interest of the glassmorphism effect.

Is this glassmorphism generator free?

Yes — completely free, forever, with no account required. The tool is provided by UIXDraft as a free resource for the web design and development community. The generated CSS is yours to use in any project, commercial or personal, with no attribution required.