CSS Shadow Generator

The four values, in order

A box-shadow takes horizontal offset, vertical offset, blur radius and spread radius, then a colour. Offsets move the shadow, blur softens its edge, and spread grows or shrinks it before blurring. A negative spread pulls the shadow in, which is the trick for a tight shadow that does not bleed out from under the element.

Layer shadows rather than enlarging one

A single large blurred shadow reads as cheap. Real shadows are the sum of ambient occlusion close to the object and a softer cast shadow further out. Two or three comma-separated shadows, each with a progressively larger offset and blur and a lower opacity, produce a far more convincing result than one shadow at any setting. This is the single biggest difference between a shadow that looks designed and one that does not.

Light comes from above

Almost every interface assumes an overhead light source, so shadows fall downward: a positive vertical offset with zero or near-zero horizontal. A shadow offset sideways reads as wrong because it contradicts an assumption the viewer does not know they are making. Keep the direction consistent across every element on a page, or the surface stops feeling like one plane.

Use transparent black, not grey

A grey shadow looks dead over coloured backgrounds because it does not take on any of the underlying hue. Black at low alpha composites with whatever is behind it and stays believable everywhere. For a richer result, tint the shadow toward the complement of the surface colour rather than reaching for pure grey.

Inset shadows are a different tool

The inset keyword draws the shadow inside the element, which is how pressed buttons, input wells and neumorphic surfaces are made. Inset and outset shadows can be combined in one declaration, which is exactly how the soft-UI look is built.

Performance

Box-shadow is painted, not composited, so animating blur or spread forces repaints and can be janky on lower-end devices. Animate opacity or transform on a pseudo-element carrying the shadow instead, which the compositor can handle on the GPU.