Sunny Books
What we have

Box-shadow: Syntax and effects

The box-shadow property attaches one or more drop-shadows to the box.bThe property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword.

Syntax

box-shadow: x-offset   y-offset   blur   spread   color   inset;

x-offset: Itdefines the horizontal offset of the shadow, with a positive value offseting the shadow to the right of the element, and a negative value to the left.

y-offset: It defines the vertifical offset of the shadow, with a positive value offsetting the shadow from the bottom of the element, and a negative value from the top.

blur This value is optional, it defines the blur distance of the shadow. Only positive values are allowed, and the larger the value, the more the shadow's edge is blurred.

spread: This is also optional, it defines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions, while a negative value will cause the shadow shape to contract.

color: It defines the color of the shadow, directly after the 2-4 length values

inset: This optional keyword causes the shadow to be drawn inside the element. usually, it is put before the length and color values.

Browser support

1.0

3.0

4.0

9.0

10.5

Examples

Shadows with different offsets, spread and blur

offset right bottom
Example A shows a shadow offset to the right and bottom by 5px:
div[A]{ -moz-box-shadow: 5px 5px #5292bd;
-webkit-box-shadow : 5px 5px #5292bd ;
box-shadow : 5px 5px #5292bd ;}

offset left top, blur
Example B shows a shadow offset to the left and top by 5px and a blur distance of 5px:
div[B]{ -moz-box-shadow: -5px -5px 5px #5292bd;
-webkit-box-shadow: -5px -5px 5px #5292bd;
box-shadow: -5px -5px 5px #5292bd;}

offset, spread
Example C shows a shadow offset to the right and bottom by 5px and a spread distance of 5px:
div[C]{ -moz-box-shadow: 5px 5px 0 5px #5292bd;
-webkit-box-shadow: 5px 5px 0 5px #5292bd;
box-shadow: 5px 5px 0 5px #5292bd;}

offset, blur, spread
Example D shows a shadow offset to the right and bottom by 5px, a blur distance of 5px and a spread distance of 5px:
div[D]{ -moz-box-shadow: 5px 5px 5px 5px #5292bd;
-webkit-box-shadow: 5px 5px 5px 5px #5292bd;
box-shadow: 5px 5px 5px 5px #5292bd;}

blur
Example E shows a shadow with no offset, a blur distance of 5px:
div[E]{ -moz-box-shadow: 0 0 5px #5292bd;
-webkit-box-shadow: 0 0 5px #5292bd;
box-shadow: 0 0 5px #5292bd;}

blur,spread
Example F shows a shadow with no offset, a blur distance of 5px and a spread distance of 5px:
div[F]{ -moz-box-shadow: 0 0 5px 5px #5292bd;
-webkit-box-shadow: 0 0 5px 5px #5292bd;
box-shadow: 0 0 5px 5px #5292bd;}

Inner shadows with "inset" keyword

inset, offset, blur
Example G shows an inset shadow offset to the right and bottom by 5px, a blur distance of 5px:
div[G]{ -moz-box-shadow: inset 5px 5px 5px #5292bd;
-webkit-box-shadow: inset 5px 5px 5px #5292bd;
box-shadow: inset 5px 5px 5px #5292bd;}

inset,offset,blur,spread
Example H shows an inset shadow offset to the right and bottom by 5px, a blur distance of 5px and a spread distance of 5px:
div[H]{ -moz-box-shadow: inset 5px 5px 5px 5px #5292bd;
-webkit-box-shadow: inset 5px 5px 5px 5px #5292bd;
box-shadow: inset 5px 5px 5px 5px #5292bd;}

Applying shadows to different sides of the box

top
Example I shows a shadow on the top side of the box:
div[I]{ -moz-box-shadow: 0 -5px 5px #5292bd;
-webkit-box-shadow: 0 -5px 5px #5292bd;
box-shadow: 0 -5px 5px #5292bd;}

inset, top
Example J shows an inset shadow on the top side of the box:
div[J]{ -moz-box-shadow: inset 0 5px 5px #5292bd;
-webkit-box-shadow: inset 0 5px 5px #5292bd;
box-shadow: inset 0 5px 5px #5292bd;}

bottom
Example K shows a shadow on the bottom side of the box:
div[K]{ -moz-box-shadow: 0 5px 5px #5292bd;
-webkit-box-shadow: 0 5px 5px #5292bd;
box-shadow: 0 5px 5px #5292bd;}

inset, bottom
Example L shows an inset shadow on the bottom side of the box:
div[L]{ -moz-box-shadow: inset 0 -5px 5px #5292bd;
-webkit-box-shadow: inset 0 -5px 5px #5292bdv;
box-shadow: inset 0 -5px 5px #5292bd;}

left
Example M shows a shadow on the left side of the box:
div[M]{ -moz-box-shadow: -5px 0 5px #5292bd;
-webkit-box-shadow: -5px 0 5px #5292bd;
box-shadow: -5px 0 5px #5292bd;}

inset, left
Example N shows an inset shadow on the left side of the box:
div[N]{ -moz-box-shadow: inset 5px 0 5px #5292bd;
-webkit-box-shadow: inset 5px 0 5px #5292bd;
box-shadow: inset 5px 0 5px #5292bd;}

right
Example O shows a shadow on the right side of the box:
div[O]{ -moz-box-shadow: 5px 0 5px #5292bd;
-webkit-box-shadow: 5px 0 5px #5292bdv;
box-shadow: 5px 0 5px #5292bd;}

inset, right
Example P shows an inset shadow on the right side of the box:
div[P]{ -moz-box-shadow: inset -5px 0 5px #5292bd;
-webkit-box-shadow: inset -5px 0 5px #5292bd;
box-shadow: inset -5px 0 5px #5292bd;}

left, right
Example Q shows a shadow on the left and right side of the box:
div[O]{ -5px 0 5px #5292bd, 5px 0 5px #5292bd;
-webkit-box-shadow: -5px 0 5px #5292bd, 5px 0 5px #5292bd;
box-shadow: -5px 0 5px #5292bd, 5px 0 5px #5292bd;}

inset, left, right
Example R shows an inset shadow on the left and right side of the box:
div[R]{
-moz-box-shadow: inset 5px 0 5px #5292bd, inset -5px 0 5px #5292bd;
-webkit-box-shadow: inset 5px 0 5px #5292bd, inset -5px 0 5px #5292bd;
box-shadow: inset 5px 0 5px #5292bd, inset -5px 0 5px #5292bd;}

Shadows with opacity using CSS3 RGBa colors

opacity 60%
Example S shows a shadow offset to the right and bottom by 5px, a blur distance of 5px and a spread distance of 5px:
div[S]{-moz-box-shadow: 5px 5px 5px 5px rgba(82,146,189,0.6);
-webkit-box-shadow: 5px 5px 5px 5px rgba(82,146,189,0.6);
box-shadow: 5px 5px 5px 5px rgba(82,146,189,0.6);}

opacity 30%
Example T shows an inset shadow offset to the right and bottom by 5px, a blur distance of 5px and a spread distance of 5px:
div[T]{-moz-box-shadow: inset 5px 5px 5px 5px rgba(82,146,189,0.3);
-webkit-box-shadow: inset 5px 5px 5px 5px rgba(82,146,189,0.3);
box-shadow: inset 5px 5px 5px 5px rgba(82,146,189,0.3);}

SUNWEB EXPERT