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