CSS Box Shadow

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

JavaScript syntax:

object.style.boxShadow="10px 10px 5px #888888"

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

VALUE

DESCRIPTION

h-shadow

Required. The position of the horizontal shadow. Negative values are allowed

v-shadow

Required. The position of the vertical shadow. Negative values are allowed

blur

Optional. The blur distance

spread

Optional. The size of shadow

color

Optional. The color of the shadow.

inset

Optional. Changes the shadow from an outer shadow (outset) to an inner shadow

Box Shadow for Firefox, Safari/Chrome, Opera and IE9:

.Example_A {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

Inner Shadow for Firefox, Safari/Chrome, Opera and IE9:

.Example_B {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

One Side Box Shadow for Firefox, Safari/Chrome, Opera and IE9:

.Example_C {
 -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
         box-shadow: 0 8px 6px -6px black;
}