It only works over something
backdrop-filter blurs whatever is behind the element. Over a flat colour there is nothing to blur and the effect vanishes, which is the single most common reason a copied snippet appears to do nothing. Put the panel over a photograph or a gradient — the preview above uses one deliberately.
The saturation trick
Blurring alone leaves the backdrop looking washed out. Pushing saturation above 100% brings the colour back and is what makes the effect read as glass rather than as fog. Around 160% suits most backgrounds.
Two things worth checking
Text over glass is text over whatever is behind the glass, so contrast changes as the background does. Check it against the busiest part of your image, not the calmest.
A large blurred backdrop is repainted as the page scrolls, which costs more than a plain background. One or two panels are fine; a list of forty is not.
Frequently asked questions
Why does the effect not show on my page?
Almost always because there is nothing behind the element to blur. It needs an image, a gradient or other content underneath — over a solid colour it does nothing.
Which browsers support it?
All current ones. Safari needs the -webkit- prefix, which the generated CSS includes. Very old browsers ignore it and show the plain tinted background, which still looks reasonable.
Is anything uploaded?
No. Everything runs in your browser with JavaScript. Nothing is uploaded, and the tool keeps working with the network off.
Something wrong with this tool, or an idea for it? Tell us