CodeBeautifyCSS Box Shadow Generator
Adjust offset, blur, spread, color, and opacity to build a box-shadow, with a live preview.
0px
10px
20px
0px
25%
CSS
Copied
box-shadow accepts a horizontal offset, vertical offset, blur radius, spread radius, and color, with an optional "inset" keyword to draw the shadow inside the element instead of outside it.
Frequently asked questions
How do I create a box-shadow online?
Drag the offset, blur, and spread sliders and pick a color — the preview and CSS code update live. Click Copy CSS to grab the result.
What does the "inset" option do?
It draws the shadow inside the element's border instead of outside it, creating a pressed-in or recessed look.