What the four numbers do
| Setting | Range here | Effect |
|---|---|---|
| X | −50 to 50 px | Moves the shadow right (positive) or left |
| Y | −50 to 50 px | Moves it down (positive) or up; a few pixels down reads as light from above |
| Blur | 0 to 100 px | Softens the edge; 0 gives a hard, flat shadow |
| Spread | −50 to 50 px | Grows or shrinks the shadow before blurring; negative values tuck it under the element |
| Opacity | 0 to 100% | Becomes the alpha in the copied rgba() colour |
Why soft shadows use more than one layer
A real object casts a small, darker shadow close to it and a wide, faint one further out. One CSS shadow can only do one of those, which is why single shadows often look either muddy or like a grey halo. Stack two or three layers instead, up to six here, each with low opacity. The first layer in the list is drawn on top.
box-shadow or drop-shadow?
box-shadow follows the element's box and its rounded corners. It suits cards, buttons and inputs, and it is the only one that can draw inner (inset) shadows and use spread. filter: drop-shadow() follows the visible shape instead, so it is the right choice for a transparent PNG icon or an SVG logo, where a box shadow would outline an invisible rectangle. When you switch the output to drop-shadow, inner layers are left out and spread is dropped, because the filter has no way to express them.
The Blob and Owl shapes preview with drop-shadow for that reason, so you can see how a shadow hugs an irregular outline. Both gives you the two lines together so you can pick one. Applying both to the same element draws the shadow twice.
Coloured shadows, glows and neumorphism
- Colored tint uses the shape's own colour for the shadow, which looks more natural under bright buttons than grey.
- Glow centres two layers with no offset, for focus rings or a lit-up effect on dark backgrounds.
- Neumorphism pairs a dark shadow on one side with a white one on the other, plus a faint inner layer. It only works when the element and background are nearly the same colour, and the low contrast makes buttons hard to spot, so use it for decoration rather than controls.
Questions
Can I come back to a shadow later?
Yes. The address bar stores the shape, colours and every layer, so bookmarking the page keeps your work.
What does Copy rgba do?
It copies only the colour of the selected layer, with its opacity, for when you are editing a shadow by hand in your own CSS.
My shadow is invisible on a dark background.
Dark shadows vanish on dark surfaces. Lighten the shadow colour or use Glow, and change the preview background to match your page so you are judging it in context. For colour ideas, try the palette generator.