Skip to main content
1

CSS Box Shadow Generator

NEW

Stack multiple CSS box-shadows and tune every layer — offset, blur, spread, color, opacity, and inset — with a live preview.

Add multiple shadows to stack them.

Preview

Box

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Box Shadow Generator

  1. Add one or more shadow layers with the controls.
  2. Adjust offset, blur, spread, color, opacity, and inset per layer.
  3. Copy the final box-shadow CSS.

What is CSS Box Shadow Generator?

The CSS box-shadow property accepts a comma-separated list of shadows, but editing them by hand is tedious. This tool lets you add, remove, and adjust each layer visually. The preview updates instantly, and the generated CSS is ready to paste into your stylesheet.

Advertisement

FAQ

Can I stack multiple box shadows?
Yes. Add as many layers as you need; the tool combines them into a single comma-separated CSS property.
What does inset do?
Inset draws the shadow inside the element instead of outside, creating a pressed or sunken effect.
How is opacity handled?
The hex color is converted to rgba using the opacity slider, so you can create soft translucent shadows.

Related tools

Author

MW
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.

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

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement