CSS glassmorphism generator

A frosted panel blurs whatever is behind it. Change the sliders and watch the coloured shapes behind the panel soften.

The recipe in four parts

1. A semi-transparent background. background: rgba(255, 255, 255, 0.18) lets the picture behind show through. If the background is fully solid, the blur has nothing to blur.
2. backdrop-filter. blur(14px) blurs everything behind the element, and saturate(140%) brings back some of the colour that blurring washes out. The tool also writes the -webkit- version, which some Safari versions need.
3. A thin light border. 1px solid rgba(255, 255, 255, 0.35) gives the panel an edge, like the cut edge of glass.
4. Rounded corners. The radius slider changes border-radius.

Make sure it works

The effect needs something interesting behind the panel: a photograph, a gradient or coloured shapes. Over a plain white page you will see nothing. Keep text on the panel dark or white with enough contrast against the blurred area behind it, and test with the most colourful part of the picture, since contrast changes across the panel.

Always provide a fallback for browsers without backdrop-filter: wrap the effect in @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and give the panel a more opaque background outside it.

Performance

Blurring a large area on every frame is expensive on low-end phones. Use it on small panels (a card, a header), avoid animating the blur radius, and avoid stacking several blurred layers.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.