What is glassmorphism?

Glassmorphism is a UI design trend that gives elements a frosted glass appearance — semi-transparent with a blurred background, subtle borders, and a light shadow. It became popular with macOS Big Sur and is widely used in cards, modals, and navigation bars.

What CSS property creates the blur effect?

The backdrop-filter: blur() property applies a blur to everything behind the element. Combined with a semi-transparent background (e.g., rgba(255,255,255,0.2)), it creates the frosted glass look. You also need background-clip: padding-box and a subtle border.

Does glassmorphism work in all browsers?

backdrop-filter is supported in all modern browsers (Chrome, Firefox, Safari, Edge). Firefox required a flag until version 103. For older browsers, you may need a -webkit-backdrop-filter prefix for Safari support.

When should I avoid glassmorphism?

Avoid glassmorphism when accessibility is a priority — the semi-transparent backgrounds can create low text contrast. Also avoid it on solid-color backgrounds where there's nothing to blur, or in high-performance contexts where backdrop-filter can be GPU-intensive on low-end devices.

Glassmorphism CSS Generator

Create frosted glass UI effects with custom blur, opacity, and borders — copy CSS code instantly

Controls

Background Color

Glass Color

Opacity: 0.25

Blur: 10px

Border Radius: 10px

Border Width: 1px

Border Color

Border Opacity: 0.30

Glassmorphism

This is how your glass effect will look

How to Use

Adjust the controls to create your desired glass effect
Preview the effect in real-time
Copy the generated CSS code
Paste the CSS into your stylesheet
Apply the glass-card class to your HTML element