The stack is visible.
Most generators give you one line and a blur that looks grey at the edges. This one writes each layer, so you can see why the result is soft, trim the outer ones, or keep them for a popover.
Pikkola CSS Studio, tool No. 17
Shadows with depth. Glass with weight.
Two things every interface needs and most of them get wrong: a card that sits above the page, and a panel that lets the page through. Move the sliders, watch the result on a real surface, then take the values away as CSS, a Tailwind class or a React style object.
Open the bench
no upload
- 2
- generators
- 3
- exports each
- 0
- bytes uploaded
Shadow
One shadow is a smudge. Six are a surface.
A single box-shadow reads as a dark line under a rectangle. Layers with their own offset, blur and alpha read as light falling on a surface. Every slider below moves the whole stack, not one line.
The stack
Preset
Tint
A card on a page
This is the shadow at the size it will be used. Every layer it is built from is listed in the code below.
Primary
Secondary
6 layers, radius 16 pxbox-shadow
box-shadow: 0 2px 4px rgba(28, 26, 23, 0.045);
Glass
Frost needs something behind it.
A glass panel is mostly a blur of what is underneath. Pick a scene, then decide how much of it comes through: blur, saturation, tint, and the two edges that make it read as glass rather than fog.
The pane
Scene
Glass panel
Frosted, not fuzzy
The scene does the work. The panel adds a little tint, a hairline border and one highlight along the top edge.
Blur 14
Saturate 160%
blur 14 px, saturate 160%backdrop-filter
.glass { backdrop-filter: blur(14px) saturate(160%); }
Why this one
Designers hand over a shadow as a picture. This hands it over as numbers.
Both edges of the pane.
Glass reads as glass because of the border and the highlight along the top, not the blur. Those are separate sliders here, and both are in the export.
Nothing is sent anywhere.
The preview is a real element with a real style attribute. No image of your screen, no upload, no account, and the page works with the network off.
Reference
What each value does
The numbers in the code are the numbers on the sliders. Nothing is hidden behind a preset.
| Value | What it changes | Tends to go wrong when |
|---|---|---|
| 0 14px | Moves the shadow down. | It is larger than the blur. |
| blur | Softens the edge. Larger values cost more to paint. | It goes past about 60 px on a small card. |
| spread | Grows or shrinks the shadow before it is blurred. | It is negative on a card with a border. |
| alpha | Multiplies each layer. | It is pushed above 0.4. |
| backdrop-filter | Blurs what is behind the element. | The element behind is a flat colour. |
| saturate() | Adds saturation to what is behind. | It goes past 200 percent. |
| border + inset | A hairline on the edge and one highlight along the top. | Both are dropped. |
No account. No upload. No copy of your screen.
The controls are numbers in the page. They live in local storage so the bench opens the way you left it, and nowhere else.
Questions
Asked with one hand on a slider
Are these values standard CSS?
Yes. box-shadow, border-radius, background, border and backdrop-filter are all ordinary CSS. The only prefix worth keeping is -webkit-backdrop-filter for Safari, and both lines are in the export.
Why so many layers instead of one?
A real shadow has a penumbra: darker close to the object, fading outward. One blur gives a single soft edge. Six layers at increasing offset, blur and decreasing alpha approximate the gradient, and each one can be removed without breaking the others.
What if the browser has no backdrop-filter?
The tint and the border still show, so the panel becomes a translucent card rather than frosted glass. If that matters, check it in the browser you support, and keep enough contrast in the text for the fallback.
Does the preview cost anything?
It is one element with a style attribute updated on each input. There is no canvas, no image, no worker and no request. Sliders feel instant even with eight layers.
Can I share a setting?
Not by URL. The values are kept in your browser so the page opens where you left it, and the copy buttons take the CSS, the Tailwind class or the React object wherever you need it.
Is the Tailwind class exactly the same?
Yes, with spaces replaced by underscores as Tailwind requires inside brackets. A shadow with six layers makes a long class; if it gets unwieldy, the CSS tab is the better copy.
Made by one person, free to use