How to use the box shadow generator
- Start from a preset (soft, elevated, hard, neon, inset) or the default two-layer shadow.
- Tune each layer's X and Y offset, blur, spread, colour and opacity with the sliders; switch on inset for an inner shadow.
- Add, duplicate or remove layers to build depth; watch the preview on both backgrounds.
- Copy the CSS or the Tailwind class into your project.
Features
- Up to eight stacked shadow layers with per-layer controls
- Colour with alpha, rendered as rgba() so it blends on any background
- Inset shadows for pressed or recessed effects
- Live preview over light and dark surfaces
- CSS box-shadow output and Tailwind arbitrary value output
Anatomy of a box-shadow
Each layer is: [inset] offset-x offset-y blur-radius spread-radius color.
- Offset X/Y move the shadow right/down (negative values go left/up).
- Blur softens the edge; 0 gives a hard, flat shadow.
- Spread grows (positive) or shrinks (negative) the shadow before blurring; negative spread with a large blur keeps the shadow tight under the element.
- Colour opacity does most of the work. Real shadows are low-opacity black or a darkened version of the background hue, rarely solid grey.
- Multiple layers are separated by commas; the first layer is painted on top.
Shadows that look natural
Design systems usually combine two layers: a small, sharp shadow (y 1–2px, blur 2–4px) for the contact edge and a larger, softer one (y 8–12px, blur 16–24px, negative spread) for ambient light. Keep the light direction consistent across the page (usually from the top) and reduce opacity on dark backgrounds where shadows barely show; a subtle border often reads better there.