What is glassmorphism?

A visual style where a translucent panel blurs whatever is behind it, like frosted glass, usually with a thin light border and a soft shadow. In CSS it combines a semi-transparent background with backdrop-filter: blur().

Why is my glass panel not blurred?

backdrop-filter only affects content behind the element, so the element needs a transparent or semi-transparent background and something visible behind it. A fully opaque background hides the effect.

Which browsers support backdrop-filter?

Current versions of Chrome, Edge, Firefox and Safari support it. Safari versions before 18 need the -webkit- prefix, which the exported CSS includes.

Glassmorphism Generator

Create frosted-glass panels with backdrop-filter. Tune blur, transparency, saturation and border on a live background, then copy the CSS.

Live preview

Frosted glass

Text on glass needs enough contrast against every part of the background.

The backdrop is for preview only and is not exported.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Everything stays in your browser.

Format references

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Tool page updated: 2026-10-25

Live preview

Guide and example

Related tools

Format references