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

Was this tool helpful?

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

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Box Shadow Generator on Wikipedia·Developer Tools on Wikipedia·Box Shadow Generator on Britannica

People also use

← Back to Developer Tools · All tags

Box Shadow Generator

Something went wrong

How to use Box Shadow Generator

What is Box Shadow Generator?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts