CSS Box Shadow Generator
Design a box shadow visually and copy the ready-to-use CSS.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.35);
How to use CSS Box Shadow Generator
- 1Adjust the offset, blur, spread and color sliders.
- 2Preview the shadow live on the sample card.
- 3Copy the generated CSS.
Why use this tool
- Live visual preview instead of guessing pixel values.
- Covers all standard box-shadow parameters including inset.
Frequently asked questions
What does 'spread' do differently from 'blur'?
Blur softens the shadow's edges, while spread expands or contracts the shadow's size before blurring is applied.