CSS3 Box-Shadow Overview

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.

Optional value for blur distance. The larger this value, the bigger the blur.

spread

Optional value for size of shadow. Positive values will cause the shadow to expand, negative values will cause the shadow to shrink.

color

Optional value for the color of the shadow.

inset

Optional value, default is outset. Optional value is 'inset'

Examples

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.

Did you find something wrong with the information on this page? Please take a moment to report it to us
so that we can continue to improve the quality of the information on this site. Click here to
report an issue with this page.