How to use the CSS Box Shadow Generator
- Drag the sliders.
- Pick a colour and toggle inset.
- Copy the CSS.
About this tool
Shadows communicate elevation — what's clickable, what floats above the page. Good UI shadows are usually soft and subtle: a larger blur, slight negative spread and low opacity look far more natural than a hard black offset.
Pro tip: layer two shadows — a tight, darker one for contact and a large, faint one for ambient light — separated by a comma in the same box-shadow declaration.
Frequently asked questions
box-shadow vs drop-shadow?
box-shadow follows the element's box; filter: drop-shadow follows the actual shape of transparent images.
Do shadows hurt performance?
Large animated shadows can; animate opacity of a pseudo-element instead.