The values
box-shadow: [inset] x-offset y-offset blur spread colour;- Offsets — move the shadow right/down (positive) or left/up (negative).
- Blur — 0 gives a hard edge; larger values a softer shadow.
- Spread — grows or shrinks the shadow.
- Colour and opacity — soft shadows usually use black at 10–25 % opacity.
- Inset — draws the shadow inside the box.
Design tips
Modern interfaces use soft, large shadows with low opacity (e.g. 0 10px 30px rgba(0,0,0,.15)). Combine two shadows — one small and sharp, one large and soft — for realistic depth.
Frequently asked questions
Can I add several shadows?
Yes, separate shadows with commas in the box-shadow property.
Does box-shadow affect layout?
No, shadows do not take up space or move other elements.
What is the difference with text-shadow?
box-shadow shadows the element's box; text-shadow shadows the letters. Use the Text Shadow Generator for text.