CSS glassmorphism generator

Glassmorphism is a UI style where panels look like frosted glass: translucent, slightly blurred versions of what is behind them, with a subtle light border. It is used in operating systems like macOS and Windows 11 and in many modern landing pages. This generator produces the CSS and shows a preview over a colourful background so you can judge the effect.

How to use it

1. Adjust blur strength, background transparency and tint colour.
2. Tune the border and shadow.
3. Copy the CSS onto your card or panel.

Example output

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

Why it works

backdrop-filter blurs whatever is rendered behind the element. A semi-transparent background lets that blurred content show through, and a thin light border mimics the edge of a glass sheet catching light.

Making it usable

• It needs something behind it. Glass over a plain white page looks like a plain grey box. Use gradients, images or shapes underneath.
• Check text contrast over the lightest and darkest parts of the background. Increase background opacity if text becomes hard to read.
• Include the -webkit- prefix for Safari.
• Performance: backdrop blur is expensive. Avoid it on large scrolling areas or many elements on mobile.
• Provide a solid fallback background for users who enable reduced transparency.