CSS3 Box-Shadow Overview

Friday, November 16, 2012


The CSS3 box-shadow property allows web designers to implement drop shadows on box elements. Developers can specify box-shadows values for color, size, blur and offset. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.

Browser Support

The box-shadow property is supported in Internet Explorer 9+, Firefox, Chrome, Opera, and Safari. Earlier versions of Internet Explorer do not support the box-shadow property.

Your browser may support the box-shadow property.

Box-Shadow Syntax

The box-shadow property can accept a comma-separated list of up to six values, two of which are required. The order of values are as follows: horizontal offset, vertical offset, blur distance, spread distance, color value, and 'inset' keyword that can be used to creating an inner shadow.

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

H-shadow and v-shadow values are required. Omitted lengths default to 0.

h-shadowRequired value for the horizontal shadow. Negative values are allowed
v-shadowRequired value for the vertical shadow. Negative values are allowed
blurOptional value for blur distance. The larger this value, the bigger the blur.
spreadOptional value for size of shadow. Positive values will cause the shadow to expand, negative values will cause the shadow to shrink.
colorOptional value for the color of the shadow.
insetOptional value, default is outset. Optional value is 'inset'



Here are some examples that should work across the browsers that support the border-radius property. For older mozilla (Firefox: -moz-box-shadow) and webkit (Chrome, Safari, etc.: -webkit-box-shadow) browsers, you can use the vendor prefix. However, at the time of this writing, the box-shadow property is support by most browsers in use. You can use the border-radius property in combination with the box-shadow property. In addition, when setting the color of the box-shadow, you can apply an opacity value if you specify the RGBa value.

  #A {box-shadow: 25px 25px;}
  #B {box-shadow: 25px 25px 10px;}
  #C {box-shadow: 25px 25px 10px 5px;}
  #D {box-shadow: 25px 25px 10px 5px rgba(127,127,127,0.7);}
  #E {box-shadow: 25px 25px 10px;border-radius:10px;}
  #F {box-shadow: 25px 25px 10px rgba(127,127,127,0.7);border-radius:10px;}

box-shadow examples

While not a common approach, you can apply multiple box-shadows on the element by separating those sets of values using a comma. For example.

box-shadow: h-shadow v-shadow blur spread color inset, h-shadow v-shadow blur spread color inset;

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3 HTML CSS and JavaScript The Book of CSS3