CSS Box Shadow Generator
Visually build a CSS box-shadow and copy the code.
Build a CSS box-shadow visually with sliders for offset, blur, spread, color, and opacity — with a live preview. Toggle inset shadows and copy the exact CSS when it looks right.
0px
10px
25px
-5px
25%
box-shadow: 0px 10px 25px -5px rgba(15, 23, 42, 0.25);Runs entirely in your browser — nothing is uploaded.
How to use the css box shadow generator
- 1Adjust the offset, blur, spread, and color.
- 2Toggle inset for an inner shadow if you want one.
- 3Copy the generated box-shadow CSS.
Frequently asked questions
What does spread do?
Spread grows (positive) or shrinks (negative) the shadow's size before the blur is applied.
What is an inset shadow?
An inset shadow is drawn inside the element's edges instead of outside, creating an inner-shadow or pressed-in effect.