How to Add Drop Shadows with CSS3

This topic shows you how to add drop shadows to the outside or inside of your layout elements by using Windows Internet Explorer 9 and Cascading Style Sheets, Level 3 (CSS3). Shadows even follow the corner curves that you create with the new rounded corner support in Internet Explorer 9. This topic contains the following sections:

Box Shadow Options and Syntax

Drop shadows are enabled by the box-shadow property. Like rounded corners, drop shadows in Internet Explorer 9 are very robust; there are several options you can specify. The order of values within the box-shadow property is as follows:

Here, hoff indicates the horizontal offset, voff indicates the vertical offset, bd indicates the blur distance, sd indicates the spread distance, color indicates the color of the shadow, and inset is a keyword that, when used, indicates the shadow is an inner shadow instead of an outer shadow. The first two values are required for the property to work, and all values must be specified in the order listed. If a color is not specified, Internet Explorer 9 uses black as the shadow color.

Each value is defined here:

horizontal offset This length value is required. It specifies how far to the right (positive value) or left (negative value) the shadow extends. See the following diagram for a visual explanation; hoff indicates the horizontal offset, and is set to 20 pixels.

vertical offset This length value is required. It specifies how far down (positive value) or up (negative value) the shadow extends. See the following diagram for a visual explanation; voff indicates the vertical offset, and is set to 20 pixels.

blur distance This positive length value indicates how blurred the shadow's edge is—the approximate length between the start of the blur and the end. The higher the value, the more blurred it is. See the following diagram for a visual explanation; bd indicates the blur distance, and is set to 30 pixels.

spread distance This length value indicates how much the shadow shape expands in all directions (positive value) or contracts (negative value). This value represents how far beyond the dimensions of the original shape the shadow should extend, in all directions. See the following diagram for a visual explanation; sd indicates the spread distance, and is set to 30 pixels. The original offset border box shape is shown with a dotted line so you can better visualize the spread, which begins at the original offset box border.

color This CSS color value indicates the color of the shadow. The following image illustrates the box-shadow property with the same values as the previous illustration, but with the color "gray" appended to the end. (This value could also be #808080 to specify the same color; hexadecimal color values are also supported.)

Important Though the World Wide Web Consortium (W3C) specification for CSS3 Backgrounds and Borders does not specify that a color is required, leaving a color value out of the box-shadow property (or its corresponding vendor-specific variant) might not produce identical results across browsers. For that reason, we recommend always specifying a color value in the box-shadow property.

inset This keyword, when used, changes the drop shadow from an outer shadow to an inner shadow. The following image illustrates the box-shadow property with the same values as the spread distance illustration (the second illustration in this section), but with the inset keyword appended to the end.

Creating Basic Drop Shadows

The simplest and most common drop shadow is probably a gray shadow extending a few pixels from a box with a slight blur to it. Let's apply this to our coffee company example from the How to Add Rounded Corners with CSS3 topic. We can add a slight shadow to the header and footer to make them a bit more visually interesting.

Let's add a shadow with vertical and horizontal offsets of just five pixels, plus a slight blur of 5 pixels, and no spread. For a color, we'll specify light gray. To do this, we add the following line to both selectors:

Let's add a drop shadow to that box, but leave the offsets at zero. We'll add a slight blur to it, a small spread (to make the blur more visible by extending it from the original box borders), and color it sienna to complement the color of the coffee beans:

Let's also change the color and style of the border to better coordinate with the new drop shadow. We'll change the border-style property to solid, the border-color property to #663300 to match the navigation bar links and other interface elements, and make the shadow color match the color of the header and footer backgrounds (#FFFFCC) for some visual continuity. Thus, the new selector is:

The best way to ensure backward compatibility with other browsers and older versions of other browsers is to consult the corresponding browser vendor's website. Depending on the browser and the version, you may be able to simply duplicate the box-shadow property with the corresponding vendor-specific prefix. For instance, for the last section's sidebar example, the following selector should produce similar results in most popular browsers:

Putting It All Together

See the new look of the page after all the changes described in this topic (and with vendor-specific property names for other browsers added) . (To download the CSS, right-click the link and click Save Target As...).

Support for the box-shadow property is new in Internet Explorer 9. To add drop shadows to your layout so users of Windows Internet Explorer 8 and earlier can view them, you can take advantage of one of the alternate solutions available on the web.

Listed here are a few options. (The inclusion of any link does not imply endorsement by Microsoft of the linked site.)