Box Shadow CSS Generator
Create beautiful shadows. Preview instantly. Copy or download CSS.
box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.18);
-50 to 50
-50 to 50
0 to 120
-30 to 30
0 to 1
Pick the shadow color.
Preview
Card
Tip: Increase blur and lower opacity for modern shadows.
About this tool
Generate beautiful CSS box-shadow values with live preview. Copy or download CSS.
What it does
- Build box-shadow CSS with sliders.
- Preview and export the result.
How to use
- Adjust offsets/blur/spread/opacity.
- Preview the card.
- Copy or download the CSS.
FAQ
Does it run locally?
Yes, it runs in your browser.
Can I generate random shadows?
Yes, use the Random button for quick variations.
Is it free?
Yes, it’s free to use.