Drag the sliders, pick a color, preview the box-shadow live and copy the CSS in one click.
Presets
Preview (drag the dot below)
CSS code
FAQ
What do the box-shadow parameters mean?
In order: X-offset (positive = right), Y-offset (positive = down), blur radius (larger = softer), spread radius (positive = bigger, negative = smaller), color (supports alpha), and an optional inset for inner shadow.
Can I stack multiple shadows?
Yes. box-shadow supports comma-separated layers — the “Card” preset is two layers stacked. This tool currently outputs a single layer; for more, copy the result and combine it by hand.
Is my data uploaded?
No. All parameter tweaking and preview happen locally in your browser; nothing is sent anywhere.