CSS Box Shadow Generator

Adjust shadow geometry and color, preview the result instantly, and copy the generated box-shadow declaration.

X offset (px)

Y offset (px)

Blur (px)

Spread (px)

Shadow color

Opacity

Inset shadow

Preview

CSS

How to use this CSS Box Shadow Generator

Build layered-looking CSS box shadows visually with offset, blur, spread, color, opacity, and inset controls. Enter your values above and the result is calculated directly in your browser. No account is required.

Fast answer, clear inputs

This tool is built around one job: give the answer quickly without forcing a signup or hiding the result. Related tools are linked nearby when the next calculation or conversion is useful.