Online Tool CSS Box Shadow Generator


Create the properties of your box shadow to get the CSS style.

Use the sliders and the color picker to set the values and watch the live preview until you reach the desired effect. Select the right-down shift, spread, blur, opacity, color.

Select a custom color for the preview background and your object.


Add Multiple Box-Shadows

Web browsers allow us to add more than one shadows to our design and so does this online tool. Use the Add new button to save the current line and set up a new one. 


CSS Syntax

box-shadow: none|<em>h-offset v-offset blur spread color&nbsp;</em>|inset|initial|inherit;

Note: To attach more than one shadow to an element, add a comma-separated list of shadows (see "Try it Yourself" example below).