How this tool works
A box-shadow takes four lengths and a colour: how far right, how far down, how far the edge is softened, and how much the shadow grows or shrinks before any of that is applied. The first two place it, the blur decides whether it reads as a crisp edge or a diffuse glow, and the spread is the one most people never touch even though it is what separates a tight modern shadow from a puffy one.
Colour and opacity are combined into an rgba value here rather than being set separately, because a shadow at full strength almost never looks like a shadow. Real shadows are the absence of light rather than a layer of black paint, so the usual mistake is too much opacity rather than too little. Turning on inset moves the whole thing inside the element, which is how a pressed or recessed control is drawn.
Making a shadow that looks like light
- Match the offset to a single light source: if one element casts its shadow down and to the right, every other element on the page should too. Mixed directions are the fastest way to make an interface look assembled from parts.
- Larger elements need larger, softer shadows: a card lifted off the page carries a bigger blur than a button. Scaling blur and offset together with the size of the thing is what makes elevation read as consistent.
- A single shadow is rarely the best one: the property takes a comma-separated list, and two shadows — one tight and dark for contact, one wide and faint for ambience — look considerably more convincing than either alone.
- Spread can be negative: a negative spread pulls the shadow in tighter than the element, which is useful for a subtle lift that does not bleed out around the edges.