CSS Box Shadow Generator
Build layered and inset CSS box shadows with a live preview.
Use via API
Build a CSS box-shadow from one layer's settings, a JSON list of layers, or a named preset. Colours are validated and re-serialised. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/box-shadow-generator
curl https://pithlab.com/api/v1/tools/box-shadow-generator \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"offsetX":0,"offsetY":8,"blur":24,"spread":-4,"color":"rgba(15, 23, 42, 0.2)"}'About the Box Shadow Generator
Design CSS box shadows visually: set offset, blur, spread, colour and opacity, stack multiple layers or use inset shadows, then copy the box-shadow CSS.
How to use the Box Shadow Generator
- Start from a preset or the default soft shadow.
- Adjust the horizontal and vertical offset, blur, spread and colour. Use an rgba() or 8-digit hex colour for transparency.
- Tick Inset for an inner shadow, or add more layers for a softer, more realistic depth.
- Watch the preview update, then copy the CSS.
Examples
Input
0, 4, 12, 0, rgba(0, 0, 0, 0.25)
Output
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
Input
6, 6, 0, 0, #111827
Output
box-shadow: 6px 6px 0 0 rgb(17, 24, 39);
Input
inset 0, 2, 4, 0, #00000033
Output
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
Frequently asked questions
What do the four box-shadow lengths mean?
In order: horizontal offset (positive moves right), vertical offset (positive moves down), blur radius (larger is softer, never negative) and spread (positive grows the shadow, negative shrinks it).
How do I make a shadow look realistic?
Use a low-opacity colour rather than solid black, and stack two or three layers: a small tight shadow for contact and a larger, blurrier one for depth.
Does box-shadow affect layout?
No. Shadows are painted outside (or, with inset, inside) the element's border box and do not change its size or push other elements.
What is the difference between box-shadow and drop-shadow()?
box-shadow follows the element's rectangular border box, including border-radius. The filter drop-shadow() follows the visible shape, such as a transparent PNG's outline, but does not support spread or inset.