box-shadow: 2px 2px 3px rgba(0,0,0,.6)

box-shadow

value: none | [ <length> <length> <length>? || <color> ] [ , <length> <length> <length>? || <color> ]+
initial value: none
inherited: no
percentages: N/A
applicable to: all elements

The box-shadow attribute allows you to have a drop-shadow effect for any element.

The default value is none, or no shadow.

  • the first value of <length> refers to the offset in the horizontal direction. This value can be set to 0, but can not be left empty.
  • the second value of <length> is the offset in the vertical direction. This value can be set to 0, but can not be left empty.
  • the third value of <length> value sets the blur radius.This can be set to 0 for a sharp shadow. A value for the third <length> greater than the horizontal or vertical value will cause the blurred shadow to extend beyond the edge of the element.
  • the value of <color> can be any hexadecimal, defined color name, RGB value or RGBA value. If you choose to use RGBA, you can select an opacity that allows the image beneath the element to be seen through the shadow.

The box-shadow attribute is the same as a border in that is goes around the outside edge of the padding for the element. The box-shadow attribute can be used for an element that has a border or that does not have a border.

The shadow effect can be placed on each edge of the element evenly or can be shifted up, down, right or left. The shadow itself can be any color, hexadecimal, RGB or RGBA.

Unlike borders, the shadows do not influence the layout of the element and may overlap other elements.

Examples of box-shadow

Even box-shadow

The example below demonstrates how to have an even box-shadow around the entire element. Keep the horizontal and vertical values at 0 and add a blur value of greater than 0.

Example:

div.evenshadow {box-shadow: 0px 0px 4px #ccc;}

class="evenshadow"


Off-set box-shadow

The example below demonstrates how to have an offset box-shadow for the element. As you see you can use a defined color name for the shadow. The greater the number for the third value, the more blur there is for the shadow and if the third value is greater than the horizontal or vertical value, the blur will extend beyond the edges of the element on the othe side of the element.

Example:

div.rightshadow {box-shadow: 3px 3px 8px blue;}

class="rightshadow"


Semi-transparent box-shadow

The example below demonstrates how to have an offset box-shadow in the negative horizontal and vertical direction from the element by having a negative number for the first and second value. This example also demonstrates how the RGBA value with an opacity allows the image below the shadow to be seen.

Example:

div.opaqueshadow {box-shadow: -3px -4px 6px rgba(0,0,0,0.4);}

class="opaqueshadow"


Sharp box-shadow

The example below demonstrates how to have an sharp box-shadow with no blur effect. This is accomplished by setting the third value to "0".

Example:

div.sharpshadow {box-shadow: 3px 3px 0px #ddd;}

class="sharphadow"