# Property Description

The box-shadow property sets drop shadow on box elements. The color, size, blur, and offset can be specified.

This property has the following syntax:

    box-shadow:
      horizontal
      vertical
      blur
      color

# Property Values

Value | Description
--- | ---
horizontal | Specifies the length of the horizontal offset of the shadow. A positive value will ender the shadow to the right of the box, while a negative value will render the shadow to the left instead.
vertical | Specifies the length of the vertical offset of the shadow. A positive value will ender the shadow below the bottom of the box, while a negative value will render the shadow above the top of the box instead.
blur | Specifies the length of the spread / blur radius. The default value is 0, which is no blur. A positive value increases the blue (increasing the shadow), while a negative value decreases the shadow.
color | Specifies the color of the shadow

# Examples

The following example shows the basic use of this property:

    <pre style="
      border:solid 1px black;
      box-shadow:
        -5px -5px #888;
      -webkit-box-shadow:
        -5px -5px #888;
    ">
    border:solid 1px black;
    box-shadow:-5px -5px #888;
    </pre>

This produces the following result:

      border:solid 1px black;
      box-shadow:
        10px 10px 5px #888;
      -webkit-box-shadow:
        10px 10px 5px #888;

The following examples show some various box shadow values:

      border:solid 1px black;
      -webkit-box-shadow:
        -5px -5px #888;
      box-shadow:
        -5px -5px #888;

      border:solid 1px black;
      -webkit-box-shadow:
        -5px -5px 5px #888;
      box-shadow:
        -5px -5px 5px #888;

      border:solid 1px black;
      -webkit-box-shadow:
        -5px -5px 0 5px#888;
      box-shadow:
        -5px -5px 0 5px #888;

      border:solid 1px black;
      -webkit-box-shadow:
        -5px -5px 5px 5px#888;
      box-shadow:
        -5px -5px 5px 5px #888;

      border:solid 1px black;
      -webkit-box-shadow:
        0 0 5px#888;
      box-shadow:
        0 0 5px #888;

      border:solid 1px black;
      -webkit-box-shadow:
        0 0 5px 5px#888;
      box-shadow:
        0 0 5px 5px #888;

# Browser Support

Firefox | IE | Chrome | Opera | Safari

# Miscellaneous Information

Inherited: | No
Defined In: | CSS3
Initial Value: | 0
Applies To: | All elements