Glassmorphism CSS Generator

How frosted glass works in CSS

Glassmorphism rests on one property: backdrop-filter. Unlike filter, which blurs the element itself, backdrop-filter blurs whatever the browser has already painted behind the element. Pair it with a semi-transparent background and you get the frosted panel look popularized by macOS and iOS.

Four ingredients make it convincing:

1. A translucent fill. Somewhere between 10 and 30 percent opacity on a light tint. Fully transparent glass looks like a hole; fully opaque glass is just a card.
2. Blur. 8 to 20 pixels for cards, 20 to 30 for full-screen overlays. Past 30 the background turns into flat color and you lose the depth that sells the effect.
3. Saturation boost. Blurring averages neighboring pixels, which drains color. saturate(160%) to saturate(200%) brings the vibrancy back. This is the step most tutorials skip.
4. An edge highlight. A 1px border in white at 20 to 40 percent opacity mimics light catching the bevel of real glass.

.glass {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
}

The background does most of the work

Glass over a flat color looks like a gray rectangle. The effect needs something with shape and contrast behind it: gradient blobs, a photo, or bold type. Use the backdrop switcher above to see how the same settings behave on busy, dark and pale scenes. If you are designing for a light page, the Light backdrop will show you quickly that you need a darker tint or a stronger border to separate the panel.

Ship a fallback

Browsers that do not support backdrop-filter render the translucent fill with no blur, which usually makes text unreadable. The generated CSS includes an @supports not block that swaps in a nearly opaque fill for those browsers. It also respects prefers-reduced-transparency, a media query some operating systems expose for people who find see-through interfaces hard to read.

Keep text readable

Contrast on glass changes as the background moves underneath. Test your text color against the brightest and darkest area that can sit behind the panel, not the average. If the result is borderline, raise the fill opacity before you reach for a text shadow. Run your final pair through the contrast checker.

Performance notes

Every frame, the browser has to read back and blur the pixels under each glass element. That is cheap for a couple of cards and expensive for a full-height sticky sidebar on a low-end phone. Keep glass panels reasonably small, do not nest them, and avoid animating the blur radius itself.

Frequently asked questions