Why layer your shadows
Real objects don't cast a single flat shadow. The most convincing UI depth comes from stacking two or three box-shadow layers: a tight, dark one close to the element for the contact shadow, plus a wider, softer, lighter one for ambient spread. CSS lets you comma-separate as many layers as you like.
Offset, blur, spread
Offset (X/Y) moves the shadow — usually a small positive Y for a shadow cast downward. Blur softens the edge; bigger blur reads as a light further away. Spread grows or shrinks the shadow before the blur — a slight negative spread keeps soft shadows from bleeding too far. Inset flips the shadow inward for pressed or recessed effects.