Glassmorphism CSS Generator

The five declarations that make glass

A frosted-glass card is a stack of small effects, and the tool writes each one explicitly. Defaults are an 8 px blur, a white tint at 0.2 opacity, a border at 0.3 opacity and a 16 px radius.

background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);

• backdrop-filter blurs whatever is painted behind the element. It is different from filter, which would blur the card's own text.
• The semi-transparent background is what lets the blurred scene show through. Only the tint color is adjustable; the border is always white.
• The thin light border mimics a glass edge catching light, and the fixed soft shadow lifts the card off the page.

Browser support and fallbacks

The unprefixed property is supported in current Chrome, Edge, Firefox and Safari, and Safari needed the -webkit- prefix for years, which is why the tool emits both lines. Older browsers ignore the property and show only the translucent tint, so the text may sit directly on a busy image. Wrap the effect in a feature query and give a more opaque fallback.

.card { background: rgba(30, 30, 40, 0.85); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
  }
}

Worked example: legibility

Take white text on the default card over the preview gradient. A 0.2 white tint lifts the pixels beneath it only slightly. Assuming the blur leaves the local color roughly unchanged, the text contrast against what is underneath is approximately:

All of these are below the 4.5 : 1 WCAG minimum for normal text. A pale tint over a bright backdrop is the usual failure of this style, so use a dark tint, or place text over a darker region, and verify it in the contrast checker.

Performance and layout traps

• Cost scales with area and radius. The browser must re-blur the pixels behind the card whenever they change, so large glass panels over video or animation are expensive on weak GPUs.
• A blur of 0 is useless. With no blur, you only have a see-through card.
• Ancestors can break it. A parent with its own filter, opacity below 1, mask or will-change can limit what the card sees behind it, which shows up as a flat, unblurred panel.
• Plain backgrounds hide the effect. With nothing busy behind it, the card looks like a plain translucent box. Try a photo or the gradient generator output as the backdrop.