Box shadow generator with real layers — why one shadow always looks flat

Because a real shadow has more than one edge. Where an object touches a surface, light is blocked completely and the shadow is dark and sharp; a few centimetres away it is softened by light arriving from every other direction and becomes wide, pale and diffuse. A single box-shadow has one blur radius, so it has exactly one edge softness across its whole extent — which is a shape that nothing in the physical world casts. Two layers give you two softnesses, four give a falloff. Load the “One layer” preset, then the “Contact + ambient” preset, with the same colours behind them: the total darkness is similar and only one of them reads as an object sitting above a surface.

Spread happens first and changes the size of the shadow shape: a positive value grows the rectangle in every direction before anything is blurred, a negative one shrinks it. Blur then softens the edge of whatever shape spread produced. The practical difference is that spread moves the edge and blur only fuzzes it, so `0 0 0 3px` is a solid three-pixel outline with no softness at all, while `0 0 3px 0` is a faint halo hugging the original edge. Set blur to zero in the tool above and drag spread to see the shape change with the softness held still.

The blur is centred on the edge of the shadow shape, so half of it falls outside and half inside. That means the outer reach is the offset, plus the spread, plus half the blur. A layer written `0 8px 24px -4px` reaches 8 + (−4) + 12 = 16px below the box and 12 − 4 − 8 = 0px above it. The tool prints those four numbers for the whole stack while you edit, so you never have to work out which parent needs its overflow left alone.

It draws the shadow on the inside of the padding box instead of behind the element, as if the light were coming from outside a hole rather than falling on a raised object. Everything else works the same way, but the directions invert in a way that surprises people the first time: a positive Y offset on an inset shadow darkens the top edge, because the shadow is being cast down onto the inner surface from the lip above it. That is what makes an inset shadow read as a pressed button or a sunken input. Inset and outer layers can be mixed freely in one declaration — the “Inset well” preset above does exactly that, using a one-pixel light line on the outside to suggest an edge catching the light.

No, and this is one of the genuinely useful facts about it. A shadow takes up no space at all: it does not push neighbours around, does not change the element’s size, and does not enter into any layout calculation. That is why `box-shadow: 0 0 0 2px` is such a common focus ring — it looks exactly like a 2px border but, unlike a border, adding it does not make the element 4px wider and shift everything beside it. A shadow can, however, be clipped by an ancestor with overflow hidden, since clipping is a paint decision rather than a layout one.

The first one in the list. Shadows are painted in the order they are written, with the first drawn last and therefore highest — the opposite of the intuition most people bring from stacking layers in a design tool. It only matters when layers overlap and at least one of them is close to opaque; four translucent black layers look much the same in any order, but a solid coloured ring will hide anything written after it. The tool numbers the layers in painting order and gives every one of them a move control so you can try both ways in a second.

Sometimes, and they are genuinely different tools. box-shadow follows the border box — a rectangle, or a rounded one — so it draws a rectangular shadow even behind a transparent PNG or an irregular SVG. filter: drop-shadow() follows the alpha channel of what is actually painted, so it traces the visible shape of a cut-out logo or an icon. The costs are that drop-shadow takes no spread value, that each call produces one shadow so a layered effect needs the filter repeated, and that a filter creates a containing block that can change how fixed and absolute positioning behave inside the element. Use box-shadow for boxes and drop-shadow for shapes.

Change the layer colour to a darker, more saturated version of the surface the shadow is falling on, rather than to a tint of the element itself. Pure black at low opacity desaturates whatever is under it, which is why shadows on a warm background so often look like a smudge of dirt. Set the preview’s backdrop to the real page colour, then pull the shadow colour towards a deeper version of it and raise the opacity to compensate; the result reads as shade rather than as grey paint. Keep the strongest colour on the widest, faintest layer — the tight contact layer is small enough that near-black is usually right for it.

They are painting work, not layout work, so they never trigger a reflow — but a blur has to be computed over an area that grows with the radius, and a big blur on a big element repeated over many elements in a long scrolling list is real work for the compositor. There is no single threshold worth printing here, because it depends on the device, the size of the element and how often the area is repainted, and a number invented for this page would be worse than no number. The advice that holds: keep the number of layers to what the effect needs, avoid animating blur or spread frame by frame, and if a list feels heavy, measure it in your own browser’s performance panel rather than guessing.