CSS Glassmorphism Generator

The drop shadow and the light line along the top (inset 0 1px 0) are optional finishing touches. Everything here except backdrop-filter works without it, which is what makes the fallback below possible.

• Only what is behind the panel, inside its border box. The result is clipped to the panel, including its rounded corners. Its own text and children are drawn on top, sharp.
• It needs something to blur. Over a flat colour or a smooth gradient there is nothing to soften, and the panel just looks like a tinted box. Glass shows best over photos, shapes and text, which is why the backgrounds here have sharp detail.
• It needs a see-through background. A fully opaque background hides the filtered backdrop completely.
• Edges are mirrored. The blur reflects the content at the panel's edge rather than fading to black, so there is no dark rim.
• opacity on the panel fades the blurred backdrop too, not only the panel. Use the background's alpha for transparency instead.

The colour behind the text is the tint mixed with whatever is underneath, so contrast changes as the panel moves or the page scrolls. The checker reads the pixels under the panel, blurs and saturates them as the browser does, mixes in the tint and reports the worst spot against the 4.5:1 that WCAG asks for normal text.

Blur fixes some problems and not others. For a 280 × 160 panel in the middle of the Night background, with a navy #0F172A tint and white text:

Without blur, the thin white ring and the dot grid sit right behind the letters. Even 8px of blur smears them into the dark background, and the contrast almost doubles. Past that, more blur changes little. Blur cannot darken a large bright area, though. Move the same navy panel with white text over the Daylight background and it needs 57% opacity. Swap to an 18% white tint with dark text there and you get 7.63:1 without raising the opacity at all. If the page under a panel can be anything, such as user photos, plan for its brightest part or make the tint more solid.

The output keeps the -webkit- line for Safari and iOS before version 18. In a browser without either, the panel is just the tint, so the @supports not (…) block swaps in a more solid background, using the opacity the text needs over the unblurred background.

prefers-reduced-transparency: reduce matches when someone has asked their system for fewer see-through surfaces, for example on Windows with transparency effects turned off. The output gives those people the solid version. Where the query is not supported, the rule is simply ignored.

The most common use is a header that stays at the top while content scrolls underneath it:

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 0.75);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgb(15 23 42 / 0.08);
}

Watch for one side effect: any element with backdrop-filter becomes the containing block for position: fixed and absolute children. A fixed full-screen menu or modal inside the header is then sized and placed relative to the header, not the window. Either render the menu outside the header, or move the filter onto a pseudo-element:

.site-header { position: sticky; top: 0; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(255 255 255 / 0.75);
  backdrop-filter: blur(12px) saturate(180%);
}

Blurring is redone every time the content underneath moves, so a large, heavily blurred header over a long scrolling page costs more than a small card over a still image. Keep the blur modest on big areas and avoid animating the blur value itself.

A glass panel can only blur content up to its nearest "backdrop root". In the current draft specification, these ancestors form one:

• the page's root element
• anything with filter, opacity below 1, mask, clip-path, backdrop-filter or a mix-blend-mode other than normal
• anything with will-change naming one of those properties

So a glass button inside a glass card blurs only the card, not the page behind it, and a glass panel inside a parent that is fading in with opacity can look flat until the fade ends. z-index, transform and sticky or fixed positioning do not form a backdrop root. The draft is still being discussed, so browsers can differ here.

The Tailwind tab writes the same panel as utility classes. It uses a named blur when yours matches one, and Tailwind v4 accepts any number in backdrop-saturate-140. Tailwind adds no fallback, so add the @supports block from the CSS tab to your stylesheet if you need one.