Introduction

As with the rounded corner boxes, there is a new CSS3 recommendation for drop shadows. Most of the major browsers—not named Internet Explorer—support some version of the specification. However, as with rounded corners, we most use the -moz and _webkit prefixes to insure compatibility with Firefox, Chrome and Safari.

The basic property is pretty simple, it looks like this:

box-shadow: 10px 10px 5px 5px #666

The property takes up to four numeric attributes and a color. The first value is the horizontal offset, or the distance the shadow moves from the element to the right or left. Positive numbers move it to the right, negative ones move it left. The second number is vertical offset, and it behaves much like the horizontal, moving the shadow up (negative numbers) and down (positive). The third value the blur distance (or radius). A blur radius of 0 will result in a sharp shadow. Higher numbers yield softer edges. The fourth value is spread distance. Larger numbers create larger shadows. A spread of 0 yields a shadow the same size as the element casting it. The color controls the color of the shadow itself.

Try It

Let's see it in action. We'll make a simple box, give it a background color, then add the shadow. First, the HTML markup:

<div class="dropShadow1">
    <h1>Lorum Ipsum</h1>
</div> 

Next let's give it a size and some color. Add the following CSS:

.dropShadow1 {
    width: 240px;
    background-color:#FC6;
    padding:10px;  
}

Now let's add the shadow property (new code in black):

.dropShadow1 {
    width: 240px;
    background-color:#FC6;
    padding:10px;
    box-shadow: 5px 5px 10px 5px #666;
    -moz-box-shadow: 5px 5px 10px 5px #666;
    -webkit-box-shadow: 5px 5px 10px 5px #666;
}

Note that unlike border-radius, Safari and Chrome still require the "-webkit" prefix in order for this to work. As of December, 2010, Opera is the only major browser that has implemented the box-shadow property without a prefix of some kind.

Also be aware that the property can take up to 5 values, but doesn't need them all to work. Horizontal and vertical offset (the first two values) are required (although they can be set to 0). If you don't specify a blur it will default to 0 and give you a hard edge. Likewise, if you don't specify a spread it will also default to 0. The color value's a bit trickier; according to the specification, if no color is listed the browser is supposed to use its default shadow color. Firefox and Opera do this, but the webkit browsers (Safari & Chrome) don't show the shadow at all. The moral of the story is always include a color.

Inner shadows

It's also possible to create inner shadows using the same property; all that's required is the addition of word inset before the offset values. Create a new box in the HTML markup that uses the class dropShadow2. Now make a new style rule that duplicates the the css from dropShadow1 except for the following changes:

.dropShadow2 {
    width: 240px;
    background-color:#FC6;
    padding:10px;
    box-shadow: inset 5px 5px 10px 5px #666;
    -moz-box-shadow: inset 5px 5px 10px 5px #666;
    -webkit-box-shadow: inset 5px 5px 10px 5px #666;  
}

Multiple shadows

It's possible to put more than one shadow on an object, simply add a second (or third or fourth...) set of values, separated by a comma. Create a third box called dropShadow3 and then write the following style rule (note it's the same as the previous rules where gray. The code in black is the new stuff).

.dropShadow3 {
    width: 240px; 
    background-color:#FC6;
    padding:10px;
    box-shadow: 5px 5px 10px 5px #666, 40px -30px 5px #0F0, 40px 30px 50px #F00, 
        -40px 30px 10px #FF0, -40px -30px 50px #00F;
    -moz-box-shadow: 5px 5px 10px 5px #666, 40px -30px 5px #0F0, 40px 30px 50px #F00, 
        -40px 30px 10px #FF0, -40px -30px 50px #00F;
    -webkit-box-shadow: 5px 5px 10px 5px #666, 40px -30px 5px #0F0, 40px 30px 50px #F00, 
        -40px 30px 10px #FF0, -40px -30px 50px #00F;
}

The shadows are drawn from the top down (that is, closest to the viewer to farthest from the viewer); the final shadow listed will appear at the bottom of the pile. In this case the blue shadow is on the bottom, while the gray is on top.

True transparency

That's pretty cool, but when they're piled on top of one another they don't really look like shadows; that's because they're not transparent, a quality of real shadows. Note especially how opaque the gray drop shadow is. The good news is that there is another new feature of CSS3—the ability to set the alpha value (transparency) of a color using the RGBa property. Copy and paste the previous box but use the class name dropShadow4. Do the same for the style rule, copying the .dropShadow3 rule and changing it to .dropShadow4. Then replace the hexadecimal values for the gray, green, red and yellow boxes with the following rgba() values:

.dropShadow4 {
    width: 240px; 
    background-color:#FC6;
    padding:10px;
    box-shadow: 5px 5px 10px 5px rgba(0,0,0,.5), 40px -30px 5px rgba(0,255,0,.5), 
        40px 30px 50px rgba(255,0,0,.5),-40px 30px 10px rgba(255,255,0,.5), -40px -30px 50px #00F;
    -moz-box-shadow: 5px 5px 10px 5px rgba(0,0,0,.5), 40px -30px 5px rgba(0,255,0,.5), 
        40px 30px 50px rgba(255,0,0,.5),-40px 30px 10px rgba(255,255,0,.5), -40px -30px 50px #00F;
    -webkit-box-shadow: 5px 5px 10px 5px rgba(0,0,0,.5), 40px -30px 5px rgba(0,255,0,.5), 
        40px 30px 50px rgba(255,0,0,.5),-40px 30px 10px rgba(255,255,0,.5), -40px -30px 50px #00F;
}

RGBa takes four values: red, blue, green and alpha. Red, blue and green values range from 0 (none) to 255 (full). Alpha values range from 0 (transparent) to 1 (opaque). A value of .5 means 50% transparent. Now the shadows are truly transparent, and we can see the other colors throughthemt. Pretty cool, eh?

Combo platters

Finally, it's possible to combine both rounded corners and drop shadows. Create a fifth box on your page called dropShadow5. Then write the following style rule:

.dropShadow5 {
    width: 240px;
    float:right;
    background-color:#FC6;
    padding:10px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;  
    box-shadow: 5px 5px 3px  #666;
    -moz-box-shadow: 5px 5px 3px  #666;
    -webkit-box-shadow: 5px 5px 3px  #666;
}

I've simplified the cast shadow so that the effect is more obvious. Note that the shadow also has rounded corners that match the object.