What is spread radius?

Positive spread grows the shadow's size before blurring; negative shrinks it. Combine negative spread with offset for clean directional shadows.

Box Shadow Generator

Build CSS box-shadow visually — tune offset, blur, spread, color, opacity, and inset with live preview.

Horizontal offset

Vertical offset

Blur radius

Spread radius

Shadow color

Opacity

Inset shadow

Preview

CSS

How to use Box Shadow Generator

Adjust the sliders for X/Y offset, blur, spread, color, opacity.
Toggle inset for inner shadows.
Copy the CSS.

What is Box Shadow Generator?

Sliders for every property of the box-shadow CSS spec. A preview card shows exactly what your shadow will look like. Copy the one-line CSS when you are done.

FAQ

What is spread radius?: Positive spread grows the shadow's size before blurring; negative shrinks it. Combine negative spread with offset for clean directional shadows.

Related tools

CSS Gradient Generator
Color Palette Generator
Color Converter