Glassmorphism Generator

How to build a glassmorphism card

1. Choose a colourful backdrop — the effect only reads as glass when there is something interesting behind it.
2. Set the blur and the fill opacity first, then add saturation for that vivid frosted look, and finish with a thin bright border and a soft shadow to lift the card off the page.
3. Copy the CSS. It ships both the prefixed and unprefixed backdrop-filter plus an @supports fallback that raises the fill opacity where the filter is unavailable.

FAQ

Why does my glass look grey and flat?

Usually too much blur with too little saturation, or a backdrop that is nearly one colour. Push saturation to 150–200%, keep blur around 10–20px, and put a gradient or photo behind it.

Is backdrop-filter expensive?

It forces a new compositing layer and re-blurs on every paint, so avoid animating it, avoid stacking many glass panels, and never apply it to a full-page scrolling element on mobile.

What about readability?

Glass reduces contrast. Check your text against the lightest and darkest spots of the backdrop, raise the fill opacity if needed, and never put small grey text on glass.