The CSS box-shadow property adds one or more shadows to an element. To specify multiple shadows, you must add an additional value for the shadow (s), separated by commas. Virtually any element can obtain a shadow using this property. Box-shadow allows you to easily implement multiple shadows (external or internal) on elements, specifying color, size, blur and offset values.
offset-x | offset-y | color
offset-x | offset-y | blur-radius | color
offset-x | offset-y | blur-radius | spread-radius | color
inset | offset-x | offset-y | color
box-shadow: 50px -16px cyan;
box-shadow: 9px 10px 10px red;
box-shadow: 3px 5px 4px 2px rgba(0, 0, 0, 0.5);
box-shadow: inset 4em 1em green;
box-shadow: 5px 5px red, -1em 0 0.4em blue;
object.style.boxShadow = "10px 5px 5px red"
Support for browsers is growing lately with Mozilla (Firefox), Webkit (Safari / Chrome / Konqueror), Opera and the IE9 platform preview, all of which offer a decent implementation of the specification, although Mozilla and Webkit (older versions specified in table below) still require their respective -moz- and -webkit - prefixes (note that Mozilla Firefox 4.0+ no longer requires the -moz- prefix).
Browser name, version and version with -webkit- or -moz- prefix that fully supports the box-shadow property.
| Property |
Chrome
 |
IE/Edge
 |
Firefox
 |
Safari
 |
Opera
 |
|---|---|---|---|---|---|
| box-shadow | 10 1 (with prefix: -webkit-) |
9 | 4 3.5 (with prefix: -moz-) |
5.1 3 (with prefix: -webkit-) |
10.5 |
| inset | 10 1 (with prefix: -webkit-) |
9 | 4 3.5 (with prefix: -moz-) |
5.1 5 (with prefix: -webkit-) |
10.5 |
| Multiple shadows | 10 1 (with prefix: -webkit-) |
9 | 4 3.5 (with prefix: -moz-) |
5.1 3 (with prefix: -webkit-) |
10.5 |
| Spread radius | 10 1 (with prefix: -webkit-) |
9 | 4 3.5 (with prefix: -moz-) |
5.1 5 (with prefix: -webkit-) |
10.5 |
When working with CSS, the box-shadow property allows the use of two to four numeric values for one shadow. For compulsory values for this properties are only the location of the horizontal and vertical shadows. It is allowed to use negative values in them. By optional values include a value shadow color (default black), the blur radius (default: 0, Negative values are not allowed) and the size of the shadow, or spread-radius (default 0). Please note that if you do not specify optional values, they will be set to the default values (h-shadow v-shadow black 0 0).
Sets the location of the horizontal shadow or offset shadow horizontally (<offset-x>). Negative values are allowed.
Sets the location of the vertical shadow or offset shadow vertically (<offset-y>). Negative values are allowed.
The blur radius defines the hardness or softness of the shadow. The lower the value, the sharper the shadow. A high value will create a large blur. It admits any value, but the negatives are interpreted as Zero (0).
Another length value, can be positive or negative, and defines how far the shadow will propagate (beyond what is defined by offset). A negative value will make the shadow smaller, more compressed.
You can choose to express it in any of the allowed forms (hexadecimal or rgba). In the example, the value expressed in rgba (rgb + alpha channel of transparency) and if not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the color property is used, however, the Shadow of WebKit is transparent and therefore useless if the color is omitted.
