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.

Can I add multiple box shadows at once?

Yes. Add as many shadow layers as you like; they're combined into a single comma-separated box-shadow CSS property you can copy.

What does the inset checkbox do?

Inset draws the shadow inside the element instead of outside, creating a pressed or sunken visual effect on your component.

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

Send output to:

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.
Can I add multiple box shadows at once?: Yes. Add as many shadow layers as you like; they're combined into a single comma-separated box-shadow CSS property you can copy.
What does the inset checkbox do?: Inset draws the shadow inside the element instead of outside, creating a pressed or sunken visual effect on your component.

Related tools

People also use

← Back to Developer Tools · All tags

Box Shadow Generator

How to use Box Shadow Generator

What is Box Shadow Generator?

FAQ

Related tools

People also use

Ad blocker detected

Keyboard shortcuts