Box Shadow

The CSS3 box-shadow property applies shadow to elements. Components of the box-shadow property are decoded by browsers in the following manner:

  1. The first length for the horizontal offset will cast the shadow to the right of the box (required)
  2. The second length is for the vertical offset that will cast the shadow to below the box (required)
  3. The color of the shadow (optional)

In the example below, the horizontal and vertical offsets have been set to 10px:


width: 300px; height: 100px; background-color: #9ACD32; box-shadow: 10px 10px #888888;

Blur and Spread

Besides color, there are also two optional values for the box-shadow element, which are blur and spread.


box-shadow: 10px 10px 5px 5px #888888;

Negative Values

Negative values can also be used for the box-shadow property.


box-shadow: -10px -10px 5px -5px #888888;