inset is optional — if used, this specifies that the shadow falls inwards, rather than outwards.
First length is the horizontal offset. A positive value pushes the shadow to the right. A negative value pushes it to the left. Required.
Second length is the vertical offset. A positive value pushes the shadow down. A negative value pushes it up. Required.
Third length is the blur radius. The higher the value, the greater the blur. Should not be negative. Optional — if unused, defaults to 0 (a sharp edge — no blur).
Fourth length is the spread distance. A positive value expands the shadow. A negative value contracts it. Optional — if unused, defaults to 0 (no spread).
Color is the shadow color. Optional — if unused, defaults to the computed value of color.
inset 5px -5px 10px 10px rgba(0,0,0,0.2)
[values], [values]
Multiple shadows. A list of shadow values can be separated by commas. The first value set will define the top shadow, the second the shadow generated underneath that, and so on.
#box1 {
color: red;
box-shadow: 5px -5px;
}
/* A red drop shadow stretching 5 pixels to the right and 5 pixels up, with a very solid, hard edge. */
#box2 {
box-shadow: inset 0 0 10px rgba(0,0,0,.5);
}
/* A uniform, semi-transparent black inner-shadow with a 10-pixel-wide blur. */
#box3 {
box-shadow: 5px -5px, inset 0 0 10px rgba(0,0,0,.5);
}
/* Two shadows, replicating those from #box1 and #box2. */
Browser support
Can I Use css-boxshadow? Data on support for the css-boxshadow feature across the major browsers from caniuse.com.
