Quick Answer
How does CSS box-shadow work?
// Answer
The box-shadow property takes the form offset-x offset-y blur spread color. For example, box-shadow: 0 10px 30px 0 rgba(255,34,48,0.5); creates a soft red glow below an element. Add inset to make the shadow appear inside the box.
Why use this tool
Dial it in visually
Shadows add depth and hierarchy, but the values are hard to imagine in your head. Adjust the sliders, watch the preview, and copy precise CSS — including inset shadows for pressed or inner effects.
FAQ
Frequently asked questions
In order: horizontal offset, vertical offset, blur radius, spread radius, and color.
An inset shadow appears inside the element instead of outside, useful for pressed buttons or inner depth.
Yes, CSS supports comma-separated shadows. This tool generates one; you can combine several manually.
Yes, free and in your browser.
More tools