Frosted glass CSS where every setting can be set to zero, any colour notation works, and the reason backdrop-filter renders flat on a real page is written down
Initializing in your browser…
Visual layout builder for CSS Flexbox and Grid where the generated CSS is the same declaration list the preview applies, checked to the pixel: twelve presets, the track list read against the CSS Grid grammar, and anything the browser will drop named
Build a CSS gradient and choose the colour space it is interpolated in, with the colour it keeps through the middle measured and shown.
Stack CSS box shadows with any colour notation, and never write a declaration the browser will drop: a layer that will not parse is left out and flagged rather than taking every other layer down with it
Every slider dragged to zero, and the -webkit- prefix checked in the three browser engines rather than assumed.
Every setting set to 0
blur, saturation, background opacity, border opacity, border width, border radius, shadow blur, shadow opacity
What the tool used
setting before after blur 16 0 background opacity 0.25 0 saturation 120 0 border opacity 0.2 0 border radius 16 0 shadow opacity 0.1 0 shadow blur 40 0 Seven of seven settings could not be set to zero, because each was read as parseInt(value) || default and zero is falsy. The slider snapped back. Which engine understands which property, measured 2026-09-04: chromium -webkit-backdrop-filter no backdrop-filter yes firefox -webkit-backdrop-filter no backdrop-filter yes webkit -webkit-backdrop-filter yes backdrop-filter yes
Zero is a legitimate value for all seven of these, and blur(0px) is a real declaration meaning no blur rather than a request for the default. The prefixed property is emitted first because WebKit is the one engine that understands it, which was measured rather than assumed. The page also lists the backdrop root conditions, an ancestor with a filter, an opacity below 1, a mask or contain: paint, because that is the actual reason valid backdrop-filter CSS renders flat on a real page, and it produces no error anywhere.
Frosted glass CSS with the blur, the tint, the border and the shadow all adjustable, all the way down to zero. The code and the preview are built from one list so they cannot disagree, and the real reason backdrop-filter renders flat on a live page is written on the page rather than left to be discovered.
Glassmorphism is one property doing the work. `backdrop-filter` applies a filter to whatever is painted BEHIND an element rather than to the element itself, and everything else here, the tint, the hairline border, the radius, the shadow, is decoration around it.
The previous version of this tool had a fault worth naming precisely, because it is one of the most common in this codebase. Every numeric setting was read as `parseInt(value) || default`, and zero is falsy in JavaScript. So none of the seven settings could be set to zero at all: dragging the blur slider to 0 gave 16, the background opacity to 0 gave 0.25, the border radius to 0 gave 16, the shadow to 0 gave 40. Measured on 2026-09-04, all seven behaved that way, and the slider visibly snapped back. Every setting can now be set to zero, and zero means zero: `blur(0px)` is a real declaration meaning no blur, not a request for the default.
The colours had the other common fault. They were read with `parseInt(hex.slice(1, 3), 16)`, which handles a six digit hex and produces NaN for everything else, and the tint and the border are free text fields, so typing `#fff` or `red` gave `rgba(255, 15, NaN, 0.5)` and the browser threw the declaration away. Any CSS colour notation now works, and an eight digit hex keeps its own alpha, which the opacity slider multiplies rather than replaces.
The browser support note was wrong in a more interesting way. It said `backdrop-filter` "is supported in all modern browsers", which is true and is almost never the reason the effect fails. The reason is the BACKDROP ROOT. Filter Effects 2 section 3.1: an ancestor with a filter of its own, an opacity below 1, a mask, a `will-change` naming any of those, or `contain: paint` becomes the backdrop root, and everything painted outside it stops being part of the backdrop. A glass panel inside such an ancestor renders as a flat translucent rectangle with nothing blurred behind it, no error appears anywhere, and the CSS is perfectly valid. That list is on the page now, because it is what people actually hit.
The `-webkit-` line is real and is checked rather than asserted. Measured across three engines on 2026-09-04: Chromium and Firefox do not understand `-webkit-backdrop-filter` at all, and WebKit understands both. It is emitted first so the standard property wins wherever both are known.
One more thing that used to be assumed: the preview and the pasteable CSS are now built from a single list of declarations, so the box on screen and the code under it cannot describe different things.
Pick the No blur preset. Blur and saturation both sit at their neutral values, which the previous version could not express because zero was read as missing.
Pick Dark. The tint is black rather than white, which is what glass over a pale photograph actually looks like.
A blurred translucent bar keeps the page underneath legible as it scrolls behind, which a solid bar cannot do.
Glass separates a dialog from the page without hiding it, so the context stays visible.
Text on a photograph needs a surface. Blur plus a light tint gives one without flattening the image to a rectangle of grey.
The backdrop root list on the page is the answer nine times out of ten, and it is nothing to do with browser support.
Almost certainly the backdrop root. An ancestor with a filter, an opacity below 1, a mask, a mix-blend-mode, a will-change naming any of those, or contain: paint takes everything outside it out of the backdrop, so there is nothing left to blur. No error appears anywhere. The full list is on the page.
For Safari, yes. Measured across three engines: Chromium and Firefox do not recognise -webkit-backdrop-filter at all, and WebKit recognises both. It is emitted first so the standard property wins where both are understood.
Because blurring averages colours together, which desaturates them. Pushing saturation back up restores the colour the backdrop had, and it is most of the difference between glass that looks like glass and glass that looks like fog.
Yes. blur(0px) is a real declaration meaning no blur, and a plain translucent panel is a legitimate design. Every setting here goes to zero.
It can. The browser has to rasterise what is behind the element and filter it every frame the backdrop changes, so a large blurred panel over scrolling content is the expensive case. A smaller blur radius is cheaper than a larger one.
Any CSS colour: a three, six or eight digit hex, a colour name, rgb(), hsl(), hwb(), lab(), oklch(). An eight digit hex keeps its own alpha and the opacity slider multiplies it.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.