CSS Box Shadow Generator

CSS Box Shadow Generator is an online tool that generates box shadow property for your website. This css box shadow generator is a free tool for you. To work with this tool use the slider range to adjust your box-shadow position, color, and opacity.

Horizontal Length


Vertical Length


Blur Radius


Spread Radius




Shadow Color


Background Color

Text Color


Note: With box-shadow property must add these two lines. As shown in the example.

-webkit-box-shadow: Your box-shadow value
-moz-box-shadow: Your box-shadow value
box-shadow: Your box-shadow value
This -webkit- and moz- are for browser support. To learn more about browser support visit w3cschool

About CSS Box Shadow

Box-Shadow is a css property that gives a shadow effect around the html element. You can set multiple shadow effects by add commas, In multiple effects CSS box-shadow supports horizontal-offset, vertical-offset, blur radius, spread radius, and shadow color as you can try on our CSS Box Shadow Generator.
To declare box-shadow property you need to remember the order of box-shadow css syntax. This is an order of CSS Box Shadow syntax.
box-shadow: Horizontal-offset, Vertical-offset, Blur ,Spread, color,opacity;
Example: box-shadow: 0px 10px 100px -5px rgba(0,0,0,0.5);

Now see the box-shadow required properties that you need to add compulsory without this the box-shadow property does not work.

Box Shadow Property Values

None | This is the default value. No shadow will display
Horizontal-offset | Required.
Vertical-offset | Required.
Blur | Optional
Spread | Optional
Color | Optional. By default, it will take black color.
inset | Optional.
To learn More about CSS box shadow click here

Javascript code