Live Preview
Box Element
Shadow Layers
CSS Output
Presets — click to load
CSS Box Shadow Syntax
Also searched as: css box shadow generator free | box shadow css generator | css shadow tool | drop shadow generator css
The full box-shadow syntax is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. You can layer multiple shadows by separating them with commas. Inset makes the shadow appear inside the element. Negative spread creates a tighter shadow. Setting blur to 0 with spread creates a hard solid shadow. Multiple shadows are drawn front-to-back (first listed = on top).
Use the CSS Box Shadow Generator above — enter your values and get instant results. This free online tool calculates css box shadow generator online free without any download or signup required. Results update in real time as you type.
Use the CSS Box Shadow Generator above — enter your values and get instant results. This free online tool calculates how to create box shadow in css without any download or signup required. Results update in real time as you type.
Spread radius expands or contracts the shadow size. Positive values make the shadow larger than the element, negative values make it smaller. Combined with 0 blur and negative spread, you can create a sharp inset border effect. Combined with large blur and large positive spread, you get a glowing halo effect around an element.