ByteTips.

Guide

How to Create the Glassmorphism Effect with CSS

Five CSS properties make the frosted-glass look: a translucent background, backdrop-filter blur and saturate, a thin light border, rounded corners, and a soft shadow.

October 17, 2026 · 5 min read · Shayan

Short answer: glassmorphism is five CSS properties on a panel — a translucent rgba() background, backdrop-filter with blur() and saturate(), a thin light border, rounded corners, and a soft shadow — placed over a colorful background. The blur does the frosted-glass work; everything else sells the illusion.

The recipe

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

Each property has a job: the translucent background lets the page show through; blur() frosts whatever sits behind the panel (not the panel's own content); saturate() keeps the blurred colors vivid instead of washing out to grey; the 1px light border catches the edge like the rim of real glass; and the radius plus shadow lift the panel off the page. The -webkit- prefix is still needed for older Safari versions.

It only works over a real background

On a flat solid color the blur has nothing to frost, so the effect vanishes and you are left with a grey translucent box. Glassmorphism needs a gradient, a photo, or a pattern behind it. Test your panel over the busiest background your page has — if the glass reads there, it reads anywhere.

The traps

  • Skipping saturate(): blur() alone washes colors out to grey. saturate(150–180%) is what keeps frosted glass vivid.
  • Forgetting -webkit-backdrop-filter: older Safari versions need the prefix — without it the panel is just a translucent box there.
  • Text that fails contrast: a translucent panel over a changing background can drop below readable contrast. Test over the brightest and darkest parts of the backdrop, or add a subtle text shadow.
  • Too many blurred panels: backdrop-filter is one of the more expensive CSS properties. A few panels are fine; dozens will make scrolling stutter, especially on low-end phones.
  • Glass over a flat background: with nothing colorful behind it there is no frosted effect — just a grey box.

Try it

Dial in the blur, tint, and border on the Glassmorphism Generator and copy the finished CSS — it runs entirely in your browser.

More guides