Your files stay on your device

# CSS box shadow generator

Stack up to twelve shadow layers with offsets, blur, spread, inset, and color, preview on light and dark boxes, and copy the CSS.

Add a shadow layer to see the CSS.

Color and opacity are separate on purpose: the picker carries the hue, the opacity field multiplies the alpha, and the engine emits one rgba() per layer, so dialing a stack down does not mean re-picking twelve colors. The drop-shadow chain is an equivalent, not a match: drop-shadow() takes no spread and no inset, it follows the alpha shape of the element instead of drawing a rectangle, and chained drop-shadows compound, each drawing on the last. Where layers cannot convert, the output says exactly which and why instead of approximating.
Options

## More regex & cron tools

- [Color converter & contrast](/color/converter)
- [CSS gradient builder](/color/gradient)
[All regex & cron tools](/dev)

Was this tool useful?
YesNo

---

Canonical HTML: https://nutter.tools/dev/css-box-shadow-generator
Markdown version: https://nutter.tools/dev/css-box-shadow-generator.md
Plain-text version: https://nutter.tools/dev/css-box-shadow-generator.txt
Agent index: https://nutter.tools/llms.txt