CSS Box Shadow Generator
Design CSS box shadows with a live preview.
Sign in to use this tool
Create a free account to unlock every tool — plus a 14-day free trial of HQ Pro, no card required.
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
- 01Adjust offset, blur, spread, and color.
- 02Preview the shadow live.
- 03Copy 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.