Box Shadow Generator
Create soft or sharp CSS box shadows with a live preview.
- 100% free
- Live preview
Last reviewed by the OnlineToolPro team
0px
12px
32px
-8px
25%
What is the Box Shadow Generator?
Tweak a box shadow with sliders and see it on a card instantly — from subtle elevation to bold drop shadows, including inner (inset) shadows.
How it works
How to use the Box Shadow Generator
3 simple steps. No experience needed.
What can you use it for?
- Give cards and buttons depth.
- Match a shadow from a design file.
- Create an inner shadow for input fields.
FAQ
Frequently asked questions
What does spread do?
Positive spread makes the shadow bigger than the box; negative spread makes it smaller, which gives softer, more realistic shadows.
Related tools
Other tools you might find useful next.
More CSS Tools
Generate and tidy up CSS with live previews. 4 free tools.