Box-shadow: shadow effect on elements in css3

The css3 property box-shadow allows to add without the use of images a shadow effect to the selected elements.

Thanks to the different values of the box-shadow, we can specify that the shadow is positioned to the left/right or top/bottom on the outside of the element, its gradient of blur and its color.

The box-shadow is not part of the so-called ‘box-model’, meaning that the shadow is not considered in the final total measure of the element.

This css3 property can be combined with other properties such as css3 border-radius.

NB: The css3 property box-shadow is at the moment supported by Safari 3.1+ adding the prefix -webkit., Firefox 3.5+ adding the prefix -moz. (updated May 2009)

The box-shadow requests at least 3 values, 4 at the maximum:

• the horizontal length of the shadow
  • This value can be positive for a right shadow or negative for an effect to the left.
  • Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:-10px 10px 20px #000000;
• the vertical length of the shadow
  • This value can be positive for a top shadow or negative for an effect at the bottom.
  • Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:10px -10px 20px #000000;
• the blur radius - the degree of the blur shadow
  • This value can only be positive with zero as a minimum
  • The highest is this value, the more blurred will be the shadow
  • This value can be omitted, equal to the minimum value of 0 for no blur and neat edges.
  • Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:10px 10px 0 #000000; equal to box-shadow:10px 10px #000000;
• the shadow’s color
  • Example:
    box-shadow:10px 10px 20px #000000;
    box-shadow:10px 10px 20px black;
    box-shadow:10px 10px 20px rgb(0,0,0);

NB: in the working draft of the W3C for the css3 property box-shadow, 2 others values are proposed but not actually supported by any browsers:
- the ’spread radius’ to add the shadow in all the direction of the element
- the ‘inset’ to add an inner shadow instead of an outer one

Example of box-shadow

1. Box-shadow with positive value

Preview done with Safari 3.1:

The result:

box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;

2. Box-shadow with negative value

Preview done with Safari 3.1:

The result:

box-shadow:-20px -20px 5px #000;
-webkit-box-shadow:-20px -20px 5px #000;
-moz-box-shadow: -20px -20px 5px #000;

3. Box-shadow with no blur specified (equal to zero)

Preview done with Safari 3.1:

The result:

box-shadow:-10px 5px #000;
-webkit-box-shadow:-10px 5px #000;
-moz-box-shadow: -10px 5px #000;

4. Box-shadow + border-radius

Preview done with Safari 3.1:

The result:

box-shadow:5px -5px 10px #000;
-webkit-box-shadow:5px -5px 10px #000;
-moz-box-shadow:5px -5px 10px #000000;
border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px;

5. Box-shadow applied to 2 neighboring elements - proof that the shadow is not part of the box-model

Preview done with Safari 3.1:

The result:

Last update May 2009 - compatible with Firefox 3.5+

Bookmark this css article

box shadow, css shadow, CSS3, css3 box-shadow

18 comments

Stay updated with our RSS Feed