The box-shadow property adds one or more drop shadows to an element.

We are allowed to define more than one shadow, which are separated by comma, and specified by using 2-4 space separated lengths, an optional color and an inset keyword. If a value remains at 0, it will be omitted.

Syntax:

selector {

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

}

Values:

Following values are allowed for the box-shadow property:

  • Horizontal offset (h-shadow): A positive value positions the shadow to the right, while a negative value positions it to the left.
  • Vertical offset (v-shadow): A positive value moves the shadow down, while a negative value moves it up.
  • Blur radius (blur): If omitted or set to 0, the shadow has a crisp edge. Negative values are not allowed.
  • Spread distance (spread): A positive value causes the shape to expand in all directions, while a negative value (used with an inset shadow) causes it to contract. To create a spread effect without setting a blur radius, the third length (value) in the property must be set to 0.
  • none: The default value which omits any shadow showing.
  • color: An optional value that defines the color of the shadow (black is default).
  • inset: An optional value that moves the shadow inside (inner shadow) from outside (outset) which is the default.
  • initial, inherit

Box shadow's color

In addition to above mentioned lengths, you can as well specify the box's color. If color is not specified, the shadow will be the same color as the element's text.

Inset the shadow

By default, the shadow is drawn outside the element, but you can draw it inside the element by adding the inset keyword.

Multiply shadow effect

To specify multiple shadows on the same element, separate the definition of each shadow with a comma. The shadow effects are drawn with the first one on top, and each subsequent one layered behind. If you want shadows to overlap, list the smaller ones first.

Example

Box shadow property examples: regular outset, shadow inset and multiple shadows:

 

›› go to examples ››