# Box Shadow Generator

> Free box shadow generator. Adjust offset, blur, spread, color, and opacity with sliders, preview the shadow live, and copy the CSS. Runs in your browser.

Design perfect CSS shadows with sliders. Free, no sign-up, copy-ready code.

*Interactive tool: enter your values at https://toollantern.win/box-shadow-generator/ and results update instantly in your browser.*

## What it does

Drag the sliders for horizontal and vertical offset, blur radius, spread, color, and opacity. The preview card updates instantly and the tool outputs the exact box-shadow declaration to paste into your stylesheet. Toggle inset for inner shadows.

## Tips

Soft, low-opacity shadows look modern: try a large blur with 10 to 20 percent black. Spread expands or shrinks the shadow beyond the element's edges.

## Private by design

Everything runs in your browser. Nothing leaves your device.

## Frequently asked questions
### What is the difference between blur and spread?

Blur softens the shadow edges; spread grows or shrinks the shadow's overall size before blurring.

### What does inset do?

Inset draws the shadow inside the element's border instead of outside, useful for pressed or recessed effects.

### Is anything sent to a server?

No. The editor runs entirely in your browser.

---
Interactive version: https://toollantern.win/box-shadow-generator/