Glassmorphism Generator: Frosted Glass CSS

A glassmorphism generator builds the CSS for a frosted glass panel: a see-through background with the page behind it blurred. Set the blur, transparency, saturation, border and corner radius, try it over different backgrounds, and copy CSS with the Safari prefix and a solid fallback included.

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

/* No backdrop-filter support: a solid background keeps text readable. */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .glass {
    background: rgb(255, 255, 255);
  }
}

How to use it

1. Start from a preset. Frosted is the classic look, Clear and Heavy frost are lighter and stronger versions of it, Dark is for dark pages, and Pink tint shows a coloured glass.
2. Pick a background. Glass only looks like glass over something with detail. Stripes shows the blur most clearly; the gradients are the presets from the CSS Gradient Generator.
3. Tune it. Blur sets how frosted the glass is, Transparency how much of the tint shows, Saturation how vivid the colours behind it stay, and Radius rounds the corners. Border and Border opacity draw the light edge that makes the panel read as a sheet of glass.
4. Change the tint. Type any CSS colour, such as #ffffff, navy or rgb(17 24 39), or use the picker. The border uses the same colour.
5. Copy CSS. The rule under the controls is ready to paste. Rename .glass to your own class.

Everything runs in your browser. Nothing you make is uploaded.

The CSS behind it

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}
 
/* No backdrop-filter support: a solid background keeps text readable. */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .glass {
    background: rgb(255, 255, 255);
  }
}

• background is the tint. It has to be see-through, or there is nothing behind it to blur. 10% to 40% opacity is the usual range.
• backdrop-filter filters whatever is painted behind the element. blur() does the frosting and saturate() stops the blur washing the colours out. It takes the same functions as filter, so brightness() and contrast() work too.
• -webkit-backdrop-filter is the same thing for Safari, which only understood the prefixed name until Safari 18. It goes first, so a browser that reads both uses the standard one.
• border is the light edge. A 1px line in the tint colour at low opacity catches the eye the way the edge of real glass does.

Browser support and the fallback

backdrop-filter works in Chrome 76+, Edge 79+, Firefox 103+, Opera, Samsung Internet, and Safari 9+ with the -webkit- prefix. It does not work in Internet Explorer, in Firefox before 103, or in Opera Mini.

Without the blur, a 20% white panel over a busy background is just a faint wash, and any text on it can become unreadable. That is why the output ends with an @supports not (...) block: a browser that supports neither spelling of backdrop-filter gets the tint as a solid colour instead. It looks plainer, but the text stays readable. Check your text colour against that solid background too with the Contrast Checker.

Gotchas

• It needs something behind it. Over a flat colour, blurred and unblurred look the same. Put glass over an image, a gradient or shapes.
• Readability is on you. Glass over a busy photo can drop text contrast below what WCAG allows. Raise the opacity, add more blur, or put a darker tint behind light text.
• Stacking matters. The backdrop is what is painted behind the element within its stacking context. A parent with its own filter, opacity below 1 or backdrop-filter changes what gets blurred.
• It costs performance. Every frame, the browser blurs the area under each glass element. A few panels are fine; dozens of them, or a large blur on a scrolling page, can drop frames on a phone.
• Depth comes from a shadow. Glass panels usually float over the page with a soft shadow. Build one with the Box Shadow Generator and add it to the same rule.

Keep going

The CSS Gradient Generator makes the background glass looks best on, and the Box Shadow Generator gives it depth. The Color Converter turns the tint into any format, and the CSS cheat sheet covers the properties around it. More free tools that run in your browser are on the tools page.

Common questions