box-shadow takes four lengths and a colour, and the fastest way to understand what each does is to drag it and watch. The syntax is offset-x, offset-y, blur, spread, colour — plus the optional inset keyword that flips the shadow inwards.
A shadow occupies no space at all
This is the property's most useful characteristic and it is easy to miss. A shadow is painted, not laid out. Give an element a shadow with an 80-pixel blur and an 80-pixel spread — a shadow extending 160 pixels in every direction — and the element next to it does not move by a single pixel. Nothing reflows, nothing shifts.
That is why box-shadow is the right tool for focus rings and hover states, and why border is the wrong one. Adding a 2px border on hover pushes everything around it two pixels; adding a 2px shadow does not. The old trick of pre-applying a transparent border to reserve the space is unnecessary once you reach for a shadow instead.
Blur is not the number you think it is
The blur radius is not the standard deviation of the Gaussian blur — the specification defines it as twice that. A blur of 12px produces a Gaussian with a sigma of 6. This matters exactly when you are trying to match a shadow to a design produced in Figma or Sketch, where the blur value means something slightly different, and your CSS keeps coming out softer or tighter than the mockup.
Practically, it means the shadow fades out over roughly the blur radius on each side of the edge. A 12px blur is a soft transition about 12 pixels wide, and the visible extent of the shadow is roughly the offset plus the spread plus the blur.
Spread is the parameter people ignore, including negative spread
Spread grows or shrinks the shadow shape before blurring it. Positive spread makes the shadow larger than the element, which reads as a light source further away. That is straightforward.
Negative spread is the interesting one, and it is where realistic shadows come from. An object close to a surface casts a tight, dark shadow directly beneath it; an object far away casts a large, diffuse one. Real elevation looks like a small offset with negative spread, not a big blur. A shadow of 0 10px 10px -5px is tighter and more believable than 0 10px 20px 0 — the negative spread pulls the edges in so the shadow does not bleed out sideways from under the element.
One shadow rarely looks right — this tool makes one
CSS lets you comma-separate as many shadows as you like on a single element, and that is the single biggest difference between a shadow that looks designed and one that looks like a CSS default. Real objects do not cast one shadow; they cast a tight dark contact shadow where they meet the surface and a broader soft one further out.
This tool builds a single shadow, which is the right way to learn what each parameter does. When you go to use it, layer two or three: something like 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06) reads as depth in a way a single 0 4px 12px rgba(0,0,0,0.15) never quite does. Each layer should get larger and more transparent as it goes out.
While you are there: shadows are more convincing when they are a dark version of the background hue rather than pure black. Black shadows on a coloured surface look grey and dead, because real shadows are areas where less light reaches a surface that still has its own colour.
Do not animate it
box-shadow is not a cheap property to animate. Every frame forces the browser to repaint the shadow, and a blurred shadow is expensive to rasterise — animate it on a list of cards and you will feel the frame rate drop on a mid-range phone.
The standard fix is to put the shadow on a pseudo-element, position it behind the card, and animate that element's opacity instead. Opacity animations are handled by the compositor and never touch the paint step, so the cost is roughly zero regardless of how large the shadow is. It is a bit of extra markup for a smooth hover, and it is the difference between an interface that feels solid and one that stutters.
Common questions
Is anything sent to a server?
No. This tool is marked "client": the preview is your own browser rendering the CSS, and the generated rule is assembled from the slider values in the page. Nothing is transmitted.
What is the difference between box-shadow and filter: drop-shadow?
box-shadow follows the element's box — a rectangle, or a rounded rectangle if you have a border-radius. filter: drop-shadow follows the actual visible shape, including transparency. So for a PNG with a cut-out logo or an irregular SVG, box-shadow draws a shadow of the rectangle around it, which looks wrong, and drop-shadow traces the outline, which looks right. For ordinary rectangular cards, box-shadow is cheaper and does the same job.
Why does my inset shadow not show?
Usually because the element has a background that is painted over it, or because it has no size to speak of. An inset shadow is drawn inside the padding box, on top of the background but under the content — if the element is empty and has no height, there is nothing to draw on. It is also worth checking you have not put it on an element whose overflow is hidden by a child that fills it completely.
Can a shadow follow a border-radius?
Yes, automatically. box-shadow uses the border-box shape, so a rounded element gets a rounded shadow with no extra work. This is one of the reasons box-shadow is preferable to a manually drawn shadow image — it stays correct when the radius changes.
How do I make a shadow on only one side?
Offset it further than it blurs, and pull the sides in with negative spread. Something like 0 8px 6px -6px black produces a shadow that only appears below the element: the negative spread shrinks it narrower than the box, the offset pushes it down, and the blur softens what is left. Trying to do it with a plain offset and no negative spread will always leave the shadow peeking out at the sides.