Design & Color Tools
CSS Box Shadow Generator
Design CSS box shadows with a live preview.
FreeNo sign-upWorks in your browser
CSS
box-shadow: 0px 10px 25px -5px rgba(26, 26, 46, 0.25);About the CSS Box Shadow Generator
Design CSS box shadows free with a live preview. Drag the offset, blur, spread, opacity, and color controls until the shadow looks right — subtle card elevation, soft glow, or crisp inset — then copy the exact box-shadow CSS. Seeing the shadow while you tweak beats guessing four numbers and refreshing, every time.
How to use the CSS Box Shadow Generator
- 1Adjust offset, blur, spread, and color.
- 2Preview the shadow live.
- 3Copy the box-shadow CSS.
Frequently asked questions
What does spread do?
Spread grows (positive) or shrinks (negative) the shadow before blur is applied, changing how far it extends.
How do I make an inset shadow?
Enable the inset option to render the shadow inside the element instead of outside.
What makes a shadow look natural?
Low opacity (5–15%), more blur than offset, and a slight downward offset — real light comes from above. Layering two subtle shadows beats one heavy one.