What is Box Shadow?
A visual CSS box-shadow generator. Drag sliders for the horizontal and vertical offset, blur radius, spread and shadow opacity, choose a color, and toggle inset for inner shadows. The preview updates instantly and the box-shadow code is ready to copy.
How Box Shadow works
The box-shadow property takes: offset-x offset-y blur spread color, with an optional inset keyword.
Example: box-shadow: 6px 8px 18px 0 rgba(31,41,55,0.25); casts a soft grey shadow below and to the right. Adding inset makes the shadow appear inside the element.
Common uses
- Add depth to cards, buttons and modals
- Create soft, layered or inner shadows
- Fine-tune blur, spread and opacity visually
- Copy the exact box-shadow CSS
Frequently asked questions
What does each box-shadow value mean?
Horizontal offset, vertical offset, blur, spread, then color. Positive offsets move the shadow right and down.
What is an inset shadow?
An inner shadow drawn inside the element instead of outside — useful for pressed or inset effects.
Can I add multiple shadows?
Yes, in CSS you separate multiple shadows with commas. Generate each one here and combine them.