How to Build CSS Box Shadow
Create CSS box shadows visually with a live preview. Adjust offset, blur, spread, color, and inset. Copy production-ready CSS code instantly.
Open Box Shadow Generator →Step-by-Step Guide
Adjust shadow offset
Set the horizontal (X) and vertical (Y) offset to control where the shadow falls. Positive X moves right, positive Y moves down. Start with 4px 4px for a subtle effect.
Set blur and spread
Increase blur radius for a softer shadow (10-20px is common). Adjust spread to make the shadow larger or smaller than the element. The live preview updates instantly.
Pick shadow color
Choose a shadow color — most designs use semi-transparent black (rgba(0,0,0,0.15) to rgba(0,0,0,0.3)). You can also use colored shadows for creative effects.
Copy the CSS
Click "Copy CSS" to grab the complete box-shadow property. The generated code includes the standard property and works in all modern browsers.
Try It Now — Free
No signup, no download. Runs entirely in your browser.
Open Box Shadow Generator