🧊 Glassmorphism Generator

Build a frosted-glass "glassmorphism" card effect — adjust blur, transparency, border and shadow with live preview, then copy the CSS.

Backdrop Blur (px): 10

Background Opacity: 0.25

Glass Tint

Border Opacity: 0.3

Border Radius (px): 16

The six declarations, and how the tint composites

The sliders build one rule. Two things carry the effect: a background you can see through, and a blur applied to whatever is behind it.

.glass {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.30);
}

The tint is composited over the blurred backdrop as result = tint × a + backdrop × (1 - a). White at 0.25 over a black area gives 255 × 0.25 = 64, so the panel sits at rgb(64, 64, 64) there - but over a white area of the same backdrop it stays at 255. That range is the whole design problem with the effect. The opacity sliders run 0-100 and are divided by 100 to two decimals; the border is always white with only its alpha under your control, and the shadow is fixed at that blue-grey rgba(31, 38, 135, 0.2).

Making it hold up

backdrop-filter needs a backdrop. Put the card over an image or a gradient. On a flat background there is nothing to blur and you have just made a translucent box.
Blur of 8-16px with tint opacity around 0.2-0.3 is the range that reads as glass. Past about 25px the backdrop becomes an even wash and the effect stops looking like blur.
An ancestor with its own filter, or with opacity below 1, silently kills it - the card is then composited inside that group and has no page behind it to sample.

Contrast is the real risk. White text on the default card is 10.37:1 where the backdrop is dark and 1:1 - invisible - where it is light, and WCAG has no allowance for "most of the time". Either raise the tint opacity until the panel is effectively opaque behind the text, or put the text on its own solid strip.

Frequently asked questions

Why is my backdrop-filter not working?

Usually the element has no transparency, so there is nothing to see through; or an ancestor has opacity under 1, a filter, or a transform that creates a group the card cannot sample outside of. Safari also needs the -webkit-backdrop-filter line.

What blur value should I use for frosted glass?

10px is the default here and works for card-sized panels. Larger surfaces need more - 16 to 20px - because the same blur covers proportionally less of the area behind them.

Is glassmorphism accessible?

Not by default. The text sits on a background that changes with whatever is behind the card, so its contrast ratio changes too. Test against the lightest and the darkest part of your backdrop, and make sure both clear 4.5:1.