box-shadow syntax
box-shadow: [inset] x-offset y-offset blur spread color;| Value | What it does |
|---|---|
| x-offset | Moves the shadow right (positive) or left (negative) |
| y-offset | Moves the shadow down (positive) or up (negative) |
| blur | How soft the edge is; 0 is a sharp edge |
| spread | Grows (positive) or shrinks (negative) the shadow before blurring |
| color | Usually a dark color with low opacity, e.g. rgba(15, 23, 42, 0.25) |
| inset | Draws the shadow inside the box, like a pressed button |
Tips for realistic shadows
- Use low opacity (10–30%) and a dark color from your palette rather than pure black.
- Layer two shadows: a tight, darker one for contact and a large, soft one for depth. Tick “Add soft second layer” to do this automatically.
- Negative spread with a large blur keeps the shadow under the element, so it looks lifted rather than outlined.
- Keep the light source consistent — most interfaces use light from the top, so y-offset is positive and x-offset is zero.
- Use larger shadows to show higher elevation: cards < dropdowns < modals.
box-shadow vs drop-shadow
box-shadow follows the element’s rectangular box (and border-radius). For transparent PNGs or SVG icons, the CSS filter: drop-shadow() follows the actual shape instead. Pair your shadows with a background from the CSS gradient generator.
Frequently asked questions
How do I add a shadow to a div in CSS?
Use box-shadow, for example box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.25);
Can I use multiple box shadows?
Yes — separate them with commas. Layering two shadows looks more natural.
What does inset do?
It draws the shadow inside the element instead of outside.
Does box-shadow affect layout?
No. Shadows don’t take up space or move other elements.