Box Shadow Generator
Generate beautiful CSS box shadows visually. Customize offset, blur, and spread, and copy the CSS code instantly.
Horizontal Offset: 10px
Vertical Offset: 10px
Blur Radius: 15px
Spread Radius: 0px
CSS Box Shadow Generator
Visually generate beautiful CSS box shadows for your web projects. Adjust the horizontal and vertical offsets, blur radius, and spread radius to create the perfect drop shadow or inner shadow. Copy the generated CSS code with one click.
How to Use It
Drag the offset, blur, and spread sliders while watching the live preview, then copy the generatedbox-shadow CSS with one click.
Example
A subtle card shadow might use box-shadow: 0px 4px 12px rgba(0,0,0,0.15) — adjust the sliders to preview the effect live, then copy the exact CSS.
Common Use Cases
- Designing card, button, or modal shadows for a website.
- Fine-tuning shadow depth visually instead of guessing CSS values.
FAQs
What's the difference between outer and inner shadow?
An outer shadow appears behind the element, creating a lifted effect. An inner shadow (using theinset keyword) appears inside the element's border, creating a recessed effect.