Box Shadow Generator — Free Online CSS Box Shadow Maker

Create CSS box-shadow effects visually with sliders for X/Y offset, blur, spread, color, opacity, and an inset toggle. Live preview with copy-ready code — 100% in your browser. This free online box shadow generator runs entirely in your browser — no data is ever uploaded to a server.

How to Use

1. Enter your input — type or paste your shadow parameters — X offset, Y offset, blur, spread, and color.

2. See live results — the tool updates instantly as you type.

3. Copy or download — copy the output to clipboard or download it.

4. History — your recent inputs are saved locally and can be pinned for quick access.

Example

Set X offset 4px, Y offset 4px, blur 10px, spread 1px, and pick black. The preview box instantly shows a soft drop shadow and the tool outputs "box-shadow: 4px 4px 10px 0px #000000;" ready to paste into your stylesheet. Toggle Inset to flip it to an inner shadow.

Also check out the live tool at freeq.one/tools/box-shadow — part of the FreeQ.One suite of free online tools.