CSS Box Shadow Guide: Soft, Layered and Realistic Shadows
How box-shadow works, why layered shadows look better, ready-to-copy elevation levels, and how to use them in Tailwind.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
Shadows tell users what's raised, clickable or floating above the page. Done well, they're barely noticed; done badly — one hard, dark shadow — they make an interface look dated.
The syntax
box-shadow: [inset] offset-x offset-y blur spread color;
box-shadow: 0 4px 12px 0 rgba(15, 23, 42, 0.08);- offset-x / offset-y — direction of the light (positive y = light from above)
- blur — softness
- spread — grows or shrinks the shadow before blurring (negative values tighten it)
- color — almost always a low-opacity dark colour, not solid black
- inset — draws the shadow inside the element (pressed buttons, input fields)
Why layered shadows look real
Real objects cast a small, darker shadow where they touch the surface and a large, faint one further away. Stack two or three layers:
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px -4px rgba(15, 23, 42, 0.10);A simple elevation scale
| Level | Use | Shadow |
|---|---|---|
| 1 | Cards at rest | 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08) |
| 2 | Hovered cards | 0 4px 12px -2px rgba(0,0,0,.10) |
| 3 | Dropdowns | 0 12px 28px -6px rgba(0,0,0,.18) |
| 4 | Modals | 0 30px 60px -12px rgba(0,0,0,.25) |
Pick a scale once and reuse it everywhere.
Build visually
The free Box Shadow Generator has presets (soft, elevated, sharp, neumorphic, inset, glow), multiple layers, and copies the CSS or a Tailwind class like shadow-[0_4px_12px_rgba(0,0,0,0.08)].
Tips
- Tint shadows with your background hue (navy instead of black) for a richer look.
- Dark mode needs subtler shadows or lighter surfaces instead — shadows barely show on dark backgrounds.
- Animate cheaply: animating
box-shadowrepaints; instead animate the opacity of a pseudo-element that holds the larger shadow. - Neumorphism looks striking but often fails contrast — use it sparingly.
Rather have it built?
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on — with a consistent design system, accessible colours and technical SEO built in.
Related free tools
Color Palette Generator | Color Converter | Box Shadow Generator | Flexbox Playground | All free tools