Glassmorphism CSS Generator

backdrop-filter applies filter functions such as blur(), saturate() and brightness() to everything painted behind an element, inside its border box and clipped by its border-radius. The element's own background has to be at least partly transparent, otherwise it simply covers the filtered backdrop. That is why every glass recipe pairs the filter with an rgba() fill:

.glass {
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
}

Blur alone washes colors out, so a saturate() boost of 150–180% brings back the vivid look. The light border reads as the edge of the pane catching light.

Two side effects surprise people. Any value other than none creates a stacking context and makes the element the containing block for position: fixed descendants, so a fixed dropdown inside a glass panel is positioned against the panel, not the viewport. And the filter only sees content up to the nearest ancestor that has opacity below 1, a filter, mask, clip-path, mix-blend-mode or its own backdrop-filter (the spec's Backdrop Root). Nested glass inside glass therefore blurs only what is inside the outer pane. The spec is Filter Effects Module Level 2.

Chrome 76+, Edge 79+ and Firefox 103+ support backdrop-filter without a prefix. Safari needed -webkit-backdrop-filter from version 9 until Safari 18 added the unprefixed property, so ship both lines with the prefixed one first. For anything older, add an opaque-enough fallback that only applies when neither form is understood:

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

The generator also writes a prefers-reduced-transparency block. Only Chromium browsers (Chrome and Edge 118+) support that media feature today; Safari does not, and Firefox keeps it behind a flag. Treat it as progressive enhancement, and make the default glass readable on its own.

It can be, on large areas. Whenever the pixels behind a glass element change, the browser has to read them back and blur them again, and the work grows with both the blurred area and the blur radius. Small cards over a static background are cheap on modern hardware. The expensive cases are predictable:

• Full-screen glass over video, animated gradients or a scrolling feed re-blurs a huge area every frame. Test sticky glass headers on a mid-range phone.
• Animating the blur radius itself is costly. Animate the panel's opacity or transform instead.
• Stacked glass layers each re-sample the backdrop. One pane usually looks better anyway.
• `will-change: backdrop-filter` keeps a compositor layer alive and uses memory. Add it only to elements that really animate, and remove it afterwards.

The drifting blobs in the preview are there to show the blur updating live. Pause them if your device runs warm.

Glass puts text on a background you do not fully control, which makes contrast the main risk. WCAG 2 asks for 4.5:1 for body text and 3:1 for large text, and on glass that ratio changes as the card moves over light and dark areas. This tool estimates the worst case by compositing your tint over the backdrop's lightest, darkest and average colors. For exact numbers on a final pair of colors, use the color contrast checker.

1. Raise the tint opacity first. It is the single most effective fix.
2. Add blur. It averages out detail, so the backdrop varies less behind each letter.
3. Lower brightness behind light text, or use a lighter tint behind dark text.
4. Do not lean on a soft text-shadow. A faint, blurred shadow barely changes measured contrast and makes small text look fuzzy. Only a solid outline or halo strong enough to act as the text's background counts, and it rarely looks like glass.
5. Honor user settings. prefers-reduced-transparency: reduce and prefers-contrast: more both get a near-solid panel in the generated code.

Many polished interfaces mix them: glass for the navigation and floating toolbars, solid panels for the content people actually read. To design the shadows for any of these, try the box shadow generator, and build the vivid backdrop itself with the CSS gradient generator.