# CSS Box-Shadow Builder

URL: https://phishdestroy.io/developer-tools/box-shadow-builder
Category: Misc
Where it runs: Runs locally (nothing you enter is uploaded)

Adjust a shadow's X and Y offset, blur, spread, color and opacity, or make it inset; the preview and the box-shadow code update as you type.

## Example input

Softer shadow

```
48
```

Sets the blur to 48 px: box-shadow: 4px 8px 48px 0px rgba(0,0,0,0.4);

## FAQ

### Can I build layered shadows?

No, it makes one shadow at a time. To stack several, build each one and join them with commas in your CSS.

### How are color and opacity written?

The picked color and the opacity percentage are combined into rgba(), for example rgba(0,0,0,0.4) for black at 40%. Offsets, blur and spread are in pixels.

### Is anything uploaded?

No. The CSS is generated and previewed in your browser.

## Related tools

- [CSS Border Radius Builder](https://phishdestroy.io/developer-tools/border-radius-builder)
- [CSS Gradient Builder](https://phishdestroy.io/developer-tools/css-gradient-builder)
- [Color Converter](https://phishdestroy.io/developer-tools/color-converter)
- [Color Palette Generator](https://phishdestroy.io/developer-tools/color-palette-generator)

All tools: https://phishdestroy.io/developer-tools