Tune a frosted-glass card with sliders and copy the CSS. The preview shows the blur over a colour gradient, so you see the effect before you ship it.
Runs in your browser — nothing is uploaded
Glass card
The preview updates as you move the sliders.
backdrop-filter needs something behind the element to blur, so place the card over an image or gradient. Older browsers that lack support show the translucent fill without blur.
Glassmorphism is a style where a surface looks like frosted glass: a translucent fill, a blurred backdrop, a thin light border and a soft shadow. It is common in login panels, dashboards and modal dialogs, where the blur keeps text readable over busy imagery.
The effect comes from three properties working together. A semi-transparent background colour lets the content behind show through, backdrop-filter blurs that content, and a light border defines the edge. This generator writes all three, plus the -webkit- prefix for older Safari versions.
Blur only shows when there is something behind the element. The preview uses a gradient so you can judge the effect, but on a real page place the card over a photo, a pattern or another coloured layer, or the blur will look like a plain transparent box.
It is supported in all current versions of Chrome, Edge, Safari and Firefox. Older browsers ignore it and show only the translucent background, which still looks acceptable. Test the card on the browsers your audience uses.
The blur needs content behind the element. Over a plain white page there is nothing to blur. Place the card over an image, a gradient or coloured shapes, and make sure no parent element has overflow or a background that covers the area behind the card.
A translucent fill mixes with whatever is behind it, so text can drop below the WCAG contrast ratio of 4.5:1 over bright or busy backgrounds. Increase the fill opacity or darken the tint if the text is hard to read.
It sets the alpha of a white one-pixel border. A thin light edge is what makes the card look like glass, because it catches light at the boundary. Set it to 0 for a borderless surface.
Large blur radii on many elements can slow down scrolling on low-powered phones because the browser must recompute the filter. Use glassmorphism on a few key surfaces rather than on every list item.
No. The preview and the CSS are generated in your browser. Your colour and slider values are not sent to a server or saved.