How to use it
box-shadow: [inset] x y blur spread color;- Offset x/y moves the shadow; positive values go right and down.
- Blur softens it.
- Spread grows or shrinks it — a negative spread gives a neat shadow under the element.
- Smooth shadow stacks four layers for a more natural look.
Worked example
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) is a light card shadow common in UIs.
Frequently asked questions
Do shadows slow a site down?
Very large shadows on many animated elements can; use them sensibly.
How do I add several shadows?
Separate them with commas, as the smooth-shadow option does.
box-shadow vs text-shadow?
The first shadows the element’s box; the second shadows the letters and has no spread or inset.