Syntax
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.2); means no horizontal offset, 4 px down, a 12 px blur, no spread and a 20% black. Add the word inset to draw the shadow inside the box.
Parts
- Offsets shift the shadow right and down (negative values go left and up).
- Blur softens it; zero gives a hard edge.
- Spread enlarges or shrinks it.
Try it
The Box Shadow Generator builds the declaration, and the guide has design tips.
Common misunderstanding
A shadow does not take up space, so it can be clipped by a parent with overflow hidden, and it does not push neighbouring elements away.