How to create box shadow in CSS3

Creating shadows is not supported by CSS2.1, making the so-called box-shadow probably one of the bes new CSS3 properties. By means of the box-shadow property you can insert shadows on the upper side, right side, left side and bottom side of your box and at the same time determine the width and the radius of the shadow concerned. Similar to the border-radius an additional property has been developed to guarantee a correct shadow display in Mozilla Firefox. Not only Firefox but also Webkit (Safari and Chrome) are supported by means of an additional property. Values can be added to the properties in the following systematic order:  the horizontal offset, the vertical offset, the optional blur distance and the optional spacing distance. Please find below an example of how this property is applied in practice.

.paragraph{
box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
}


Was this useful?