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
  • Creating Basic Drop Shadows
  • Creating "Glow" Effects with Drop Shadows
  • Creating Inner Drop Shadows
  • Creating Drop Shadows with Other Browsers
  • Putting It All Together
  • Creating Drop Shadows with Older Versions of Windows Internet Explorer
  • Related topics

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:

box-shadow: hoff voff bd sd color inset;

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.

After the work we did in How to Add Rounded Corners with CSS3, the Cascading Style Sheets (CSS) for the header ID selector is the following:

#header {
    padding-top: 10px;
    background-color: #FFFFCC;
    border-top-left-radius: 50px 30px;
    border-top-right-radius: 50px 30px;
}

The CSS for the footer ID selector is the following:

#footer {
    font-style: italic;
    color: #999999;
    padding: 10px;
    font-size: 10px;
    clear: both;
    background-color: #FFFFCC;
    border-bottom-left-radius: 15px 25px;
    border-bottom-right-radius: 15px 25px;
}

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:

    box-shadow: 5px 5px 5px lightgray;

Remember that if you don't specify a fourth value for the box-shadow property, you are effectively specifying that there should be no spread. Thus the previous line is the same as the following:

    box-shadow: 5px 5px 5px 0px lightgray;

After specifying the drop shadow on the two boxes, the right portion of the header appears as follows:

The right portion of the footer appears as follows:

Creating "Glow" Effects with Drop Shadows

By simply setting the first two values in the box-shadow property to zero, you can apply a "glowing" effect to your boxes.

For instance, let's look at the product thumbnails from the coffee company example in the How to Add Rounded Corners with CSS3 topic. The CSS for the product_thumb class selector is:

.product_thumb {
    clear: left;
    height: 80px;
    width: 80px;
    margin-right: 10px;
    padding: 5px;
    float: left;
    border-width: 1px;
    border-color: #7f7f7f;
    border-style: dashed;
    border-radius: 5px;
}

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:

    box-shadow: 0 0 5px 5px sienna;

This makes the thumbnails appear as follows:

Creating Inner Drop Shadows

Finally, let's add an inner drop shadow to the sidebar. The CSS for the sidebar ID selector is:

#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: dashed;
    border-color: #996600;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
}

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:

#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
}

The new sidebar appears as follows. (The image has been reduced in size.)

Creating Drop Shadows with Other Browsers

As with the border-radius properties (as explained in the How to Add Rounded Corners with CSS3 topic), the box-shadow property has varying levels of support from different browser vendors and versions.

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:

#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    -moz-border-radius: 10em 0 5em 2em;
    -webkit-border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
    -moz-box-shadow: 10px 10px 10px #FFFFCC inset;
    -webkit-box-shadow: 10px 10px 10px #FFFFCC inset;
}

To be sure of box-shadow support and behavior, consult the corresponding browser vendor's website:

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...).

Creating Drop Shadows with Older Versions of Windows Internet Explorer

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.)

Contoso Images photo gallery

How to Add Rounded Corners with CSS3

How to Create Stylish Buttons with CSS3

CSS3