Box Shadow Generator
Design CSS box shadows visually with sliders for offset, blur, spread, color and inset. Live preview and copy-ready CSS.
Frequently asked questions
How does box-shadow work?
box-shadow takes horizontal and vertical offsets, a blur radius, an optional spread, and a color. Positive offsets move the shadow right and down.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside, which is useful for pressed buttons, inputs and inner glows.
Can I stack multiple shadows?
Yes, CSS allows comma-separated shadows. Layering a soft large shadow with a tight dark one creates realistic depth.
Become a designer
Go from free tools to real skills with in-depth design courses.
Browse all courses