CSS Glassmorphism Generator

Create frosted-glass cards with backdrop-filter blur and transparency.

Presets:

Frosted
Strong blur
Dark glass
Tinted

Opacity

20%

Blur

12px

Saturation

160%

Corner radius

16px

Used in the generated code, e.g. .glass, .card

Glass card

backdrop-filter blurs whatever is behind this card.

CSS
.glass {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

CSS Glassmorphism Generator

Glassmorphism is the frosted-glass look made popular by macOS, Windows 11, and countless dashboards: a semi-transparent panel that blurs whatever is behind it, with a thin light border and a soft shadow. Adjust the glass color, opacity, blur, saturation, corner radius, outline, and shadow, and watch the effect on three colorful test backgrounds.

How the effect works

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
  • Translucent background – a white (or dark, or tinted) fill at 10–30% opacity.
  • backdrop-filter: blur() – blurs the content behind the element, not the element itself.
  • saturate() – boosts the colors that shine through, which makes the glass look richer.
  • Light border – a slightly more opaque version of the glass color that catches the "light" on the edge.

The generator writes the -webkit- prefixed line as well, because Safari still requires it.

Making it look good

The effect only shows when there is something interesting behind the panel: gradients, shapes, or photos. On a flat white page, glass just looks gray. Keep text contrast in mind – dark text on light glass or white text on dark glass – and avoid long paragraphs on very transparent panels.

Browser support and fallbacks

backdrop-filter works in all current Chrome, Edge, Safari, and Firefox versions. In older browsers the blur is simply missing; the semi-transparent background still keeps text readable. If you need a stronger fallback, raise the opacity a little.

Pair the card with a layered shadow from the Box Shadow Generator or organic shapes from the Blob Generator behind it.

Frequently Asked Questions

backdrop-filter blurs what is behind the element. If the background is a flat color there is nothing to blur. Place the card over a gradient, image, or shapes.

Yes, Safari on macOS and iOS still requires -webkit-backdrop-filter, so the generator includes both lines.

Large blurred areas are more expensive to draw, especially while scrolling on mobile devices. Keep the blur radius moderate and avoid many overlapping glass layers.