Glassmorphism Builder

Glass needs something behind it

The whole effect rests on one property: backdrop-filter, which blurs whatever is painted behind an element rather than the element itself. Put a glass card on a flat white page and there is nothing to blur — it reads as a slightly grey box. Glassmorphism only works over something with structure: a photograph, a mesh gradient, a busy hero.

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

The saturate() is doing quiet but important work. Blurring alone averages the colors behind into something dull; pushing saturation back up afterwards is what makes the panel look like tinted glass instead of frosted plastic.

The border is the edge of the glass

A hairline of semi-transparent white along the edge is what sells the material. Real glass catches light on its edges, and without that line a glass panel tends to dissolve into its background — particularly over a light photograph, where the fill alone gives almost no separation.

The top-only border option here is the more refined version of the same idea: light usually comes from above, so a bright edge on top and nothing at the bottom reads as more physically plausible than a uniform outline.

The accessibility problem, honestly

Glassmorphism has a real weakness and it is worth being straight about: text sits on a background you do not control. Scroll the page, swap the hero image, or let a user pick their own wallpaper, and a card that passed contrast a moment ago fails. That is why the contrast indicator sits in this tool rather than being an afterthought.

Two things make it safe. Raise the background opacity until the worst case passes — 15% is pretty, 35% is usually readable — and never rely on glass alone to separate an interactive control from its surroundings. If a button is only identifiable by being slightly blurrier than the thing behind it, it is not identifiable.

Frequently asked questions

Which browsers support backdrop-filter?

All current ones, though Safari still wants -webkit-backdrop-filter alongside the standard property — the generated CSS includes both. Where it is unsupported the element simply keeps its background color, so a slightly higher opacity is a graceful fallback.

Why is my glass card not blurring anything?

Almost always one of three things: the background is a flat color so there is nothing to see, the background is painted on the element itself rather than behind it, or an ancestor has overflow: hidden with a filter, which clips the backdrop.

Is backdrop-filter expensive?

More than most CSS. It forces a new compositing layer and re-blurs whenever the content behind it moves, so a handful of glass panels is fine while a scrolling list of them is not. Keep it to chrome — navigation, modals, a card or two.

What background works best underneath?

Something with soft, large shapes rather than fine detail — which is exactly what a mesh gradient produces. Photographs work too, but busy ones leave the blur looking like a smudge rather than glass.

Other gradient tools

• Mesh Gradient Generator — the ideal backdrop for glass
• UI gradients — gradients built for interface states
• Gradient Generator — build the background first