About this bench
Pikkola, tool No. 17
Two effects, one behind the other: a card that sits above the page, and a panel that lets the page through.
The shadow is a stack, not a setting
A box-shadow with a large blur is not how a shadow looks in the world. Real light gives an object a penumbra: the shadow is dense where the object nearly touches the surface and fades outward. One blur makes a single soft edge, which is why one-line shadows look like a grey smudge rather than depth.
So the bench keeps six layers, and normally six is enough. Each layer has its own vertical offset, blur and spread, and the ink is divided between them: the first layer is tight and dark, the last is wide and faint. That is the whole trick. It is also why every layer is printed in the code, so the effect can be trimmed instead of guessed at.
Why the glass has two edges
Backdrop blur alone makes a rectangle of fog. What reads as glass is the edge: a hairline border that catches light, and one inset highlight along the top where the pane meets the light source. Both are sliders here, separate from the blur, and both are in the export.
Saturation matters as much as blur. A blurred flat colour looks dead; a blurred photograph with saturation pushed to 160 or 180 percent looks like it is behind glass. The scene picker exists so there is something worth blurring while you tune the rest.
What the exports are
Plain CSS, with the -webkit- prefix for Safari included. A Tailwind class with the values in square brackets, spaces turned into underscores. A React style object, with numeric values in pixels and the two backdrop filter properties spelled the way React wants them.
Every export is generated from the same numbers that are on the sliders. Nothing is rounded up to a preset behind your back.
What it will not do
It will not sample a shadow from a screenshot, generate an image, or tell you which shadow your design should use. It does not know the surface the card sits on, and that decides more than any slider here.
It will not make a glass panel accessible on its own. Text over a blurred photograph needs contrast checked by hand, and a fallback for browsers without backdrop-filter. The tint and border stay in place when the blur does not, which is a starting point, not a guarantee.
If something is wrong
Write to [email protected] with the values and the browser. A short list of numbers is enough to reproduce almost anything on this page.