Glassmorphism card

When to use it

Glassmorphism is the frosted pane: a translucent card over a photograph or a rich gradient, blurring what is behind it, with a bright edge where light catches the glass. It works on hero panels, media overlays, music and weather widgets, and login cards over a background image. It does not work over a flat colour, because there is nothing to blur, and it is a poor choice for dense text, because the background shows through. The specimen above is on one of the generator's bundled photographs for exactly that reason.

How it is built

Three things, in this order of importance: a translucent fill, a backdrop blur, and an inset edge. MDN describes backdrop-filter as letting you "apply graphical effects such as blurring or color shifting to the area behind an element", with the condition that makes the fill necessary: "to see the effect the element or its background needs to be transparent or partially transparent." So the card's background is white at 35 per cent, the blur is 12 pixels, and the two shadows do the rest:

.glass {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),   /* the edge, on top */
    0 8px 32px rgba(11, 21, 51, 0.24);        /* the drop shadow  */
}

In the generator this is the Box group's Opacity and Backdrop sliders plus two layers, one of them inset. The Glass category in the presets has eight variations on different photographs, and switching the canvas image is the quickest way to see how much the background decides the result.

The edge is what sells it

Take the inset highlight away and the card becomes a blurred rectangle; put it back and the card becomes a pane with a thickness. That one pixel of white at 60 per cent along the top edge is the light catching the glass, and it is doing more work than the blur. If the design wants a heavier pane, add a second inset layer at the bottom in a dark tone at low opacity, so the pane has a lit top and a shaded underside. The inset shadows guide shows the pair.

Notes and limits

Backdrop blur is the most expensive thing on this site to paint: the browser has to blur everything behind the element on every frame the element moves. Keep glass cards static, or move them with transform only, and never put a backdrop blur on something that scrolls inside a container. Safari needed the -webkit- prefix until version 18, so add -webkit-backdrop-filter before the unprefixed line if you support older iPhones; the browser support guide has the versions. And check text contrast against the busiest part of the photograph, not the calmest.

The code in four formats

Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.

box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.6),
  0 8px 32px rgba(11, 21, 51, 0.24);
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(12px);

$shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.6),
  0 8px 32px rgba(11, 21, 51, 0.24);

.element {
  box-shadow: $shadow;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
}

<div class="shadow-[inset_0_1px_0_rgba(255,255,255,0.6),_0_8px_32px_rgba(11,21,51,0.24)] rounded-[20px] backdrop-blur-[12px] bg-[rgba(255,255,255,0.35)]"></div>

/* Or name it once in your theme (Tailwind v4): */
@theme {
  --shadow-custom: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(11, 21, 51, 0.24);
}
/* then use class="shadow-custom" */

.element
  box-shadow inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px rgba(11, 21, 51, 0.24)
  border-radius 20px
  background-color rgba(255, 255, 255, 0.35)
  backdrop-filter blur(12px)