Color and design

CSS Box Shadow Generator

Configure an outer or inset CSS box shadow and copy the declaration after previewing it.

Preview shadow

Negative offsets move left or up. Negative spread shrinks the shadow. Blur cannot be negative.

Your inputs and results are processed in your browser and are not uploaded to ToolPixels. This tool does not save them.

How shadow values work

The declaration lists horizontal offset, vertical offset, blur radius, spread, and color. Inset places the shadow inside the element.

This tool creates one shadow layer. The bounded preview can crop very large shadows; the copied CSS keeps the full values. Opacity is controlled separately from the opaque HEX color.