Layered Multiple Box Shadows

A box-shadow declaration may contain numerous values, in the following order: h-shadow v-shadow blur spread color & inset

h-shadow (required)

Horizontal shadow, the higher the value used the farther to the right the shadow is positioned. Negative values position it left.

v-shadow (required)

Vertical shadow, the higher the value used, the farther upward the shadow is positioned. Negative values position it down.

blur (optional)

Blur is the part of the shadow which fades from solid color to opaque, the edge of the shadow. The higher the value used, the larger the blurred area will be.

spread (optional)

Spread refers to the width of the solid part of the shadow, before it starts to blur. The higher the value, the larger the solid portion will be.

color (optional)

Color is self explanatory, the color of the shadow

inset (optional)

Inset, when used, locates the shadow inside the border instead of outside. This one may confuse you, because the positioning behaves opposite of how you'd expect. Shifting the shadow up and right actually displays it on the left and bottom because it is <b>inside</b> the box.

While playing around with box-shadow I accidentally discovered that multiple box shadows can be used for the same selector, and layered one above the other. Below are examples showing two different border shadows. In all six examples both the horizontal and vertical value is set to 0 which distributes the shadow equally behind all four sides of each box. The first shadow is styled with a 10px blur and a 1px spread, the second is styled with the same 10px blur but a spread of 5px so the blur doesn't start until 4px farther out than the blur of the shadow on top of it, making it spread out farther.

Red over Blue

box-shadow:0px 0px 10px 1px red, 0px 0px 10px 5px blue;

 Blue over Red inset

box-shadow:0px 0px 10px 1px blue ;inset, 0px 0px 10px 5px red inset;

 Yellow over Red

box-shadow:0px 0px 10px 1px yellow, 0px 0px 10px 5px red;

 Red over Yellow inset

box-shadow:0px 0px 10px 1px red inset, 0px 0px 10px 5px yellow inset;

 Blue over Yellow

box-shadow:0px 0px 10px 1px blue, 0px 0px 10px 5px yellow;

 Yellow over Blue inset

box-shadow:0px 0px 10px 1px yellow inset, 0px 0px 10px 5px blue inset;

In the following examples you can see how the horizontal and vertical values affect box-shadow, and how using an inset border changes the way you'd position them to the opposite of how they are positioned normally.

box-shadow:5px 5px 5px;

   

box-shadow:-5px -5px 5px inset

   

box-shadow:-5px -5px 5px;

   

box-shadow:5px 5px 5px inset

   

box-shadow:0px 0px 10px;

   

box-shadow:0px 0px 10px inset