What is glassmorphism?

Glassmorphism is a UI style where a panel looks like frosted glass: a semi-transparent background, a blur of whatever sits behind it (via backdrop-filter), and a thin light border. It needs content behind the element to blur.

Why is there a -webkit-backdrop-filter line?

Safari requires the -webkit- prefixed version of backdrop-filter, so the generated CSS includes both to make the blur work across browsers.

Is anything uploaded?

No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free.

Glass

Your own backdropThe picture stays on your device.

Text contrast about 3.05:1 on the glass over this backdrop (large text only).

Blur 10px

Tint opacity 0.15

Saturation 120%

Corner radius 18px

Border opacity 0.3

Tint

Picker

Border colour

Picker

Text colour

Picker

Format

.glass {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.75);
  }
}

Glassmorphism CSS generator

Create the frosted-glass look — a translucent background with a backdrop blur and a faint border. Adjust the blur, tint and its opacity, saturation, corner radius, border colour and an optional shadow, and see it over the colourful backdrop or a picture of your own (it stays on your device). A contrast check tells you whether your text is readable on the glass, and the CSS can include a fallback for browsers without backdrop-filter.

Nothing is uploaded; the CSS is generated in your browser. Copy the block — it includes the -webkit-backdrop-filter prefix for Safari support.

Need another effect? See all CSS generators.

More CSS generators

CSS Gradient Generator

Linear, radial & conic gradients with unlimited stops.

CSS Box Shadow Generator

Layer offset, blur, spread, color & inset shadows.

CSS Border Radius Generator

Round each corner independently in px, % or em.

CSS Text Shadow Generator

Offset, blur, color — glow & layered text effects.

CSS Cubic Bezier Generator

Drag the curve to design custom easing.

Glassmorphism CSS Generator — frequently asked questions

What is glassmorphism?: Glassmorphism is a UI style where a panel looks like frosted glass: a semi-transparent background, a blur of whatever sits behind it (via backdrop-filter), and a thin light border. It needs content behind the element to blur.
Why is there a -webkit-backdrop-filter line?: Safari requires the -webkit- prefixed version of backdrop-filter, so the generated CSS includes both to make the blur work across browsers.
Is anything uploaded?: No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.