Shadow in website design is something that can be achieved by using CSS and images, to achieve shadow in CSS2 you would use images and positioning, it can be achieved but it usually means that you have to create multiple divs. See my tutorial of creating shadow in CSS2 but one of the exciting new attributes in CSS3 is box-shadow which allows someone to get a nice shadow effect with just using one attribute applied to a div.

As simple as it sounds the box-shadow attribute has very limited implementation in browsers and at this time only Mozilla Firefox 3.1 Beta (Not Mozilla Firefox 3) and Safari 3 + will display the shadow effect that the box-shadow displays. So if you want to see the shadow effect that box-shadow produces and don't have a browser that has it implemented I suggest you grab a copy of the latest version of Safari or update your Mozilla Firefox installation for the Mozilla 3.1 Beta. If you using Internet Explorer then your screwed.

Okay with that out of the way and my oppurtunity to bash Internet Explorer taken, lets get down to the tutorial.

The box-shadow attribute is similar to attributes like padding or margin, it uses the similar method of defining the top, left, right and bottom areas of a div. For example if you wanted to apply padding to a div you would use a code similar to this:

padding: 0px 10px 10px 5px;

I could of defined each padding value like this:

padding-top:0px;
padding-right:10px;
padding-bottom:10px;
padding-left:5px;

Which also does the same job as the first code, but defining each padding is just creating more work for yourself and if you noticed using:

padding: 0px 10px 10px 5px;

Actually defines the padding in the order of :

1. Top
2. Right
3. Bottom
4. Left

And the box-shadow attribute uses a similar shorthand method, so if you don't already I'd get used to using the shorthand version. Here is the basics of the box-shadow attribute:

box-shadow: 10px 10px 5px #999;
padding: 5px 5px 5px 15px;

The box-shadow attribute shows the values 10px 10px and 5px. The two values that are 10px are the shadow properties for the right and bottom, the 5px value doesn't do anything to do with the left, infact the value actually controls the blur of the shadow, oh yes those cheeky CSS3 developers have been clever and have allowed someone to not only control the position of where the shadow would be but also to control how much blur the shadow has:

Here are three examples with shadow and blur differences

Example 1:

.box1 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: 15px 15px 0px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 15px 15px 0px #999;
}

The above code produces this:

Notice the shadow is very crisp and clear, it has no blurring of it's shadow at all

Example 2

.box2 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: 10px 10px 2px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 10px 10px 2px #999;
}

The above code produces this:

A smaller shadow on this example but notice how there is a slight blur compared to example one this is because the blur is set to 2px which adds a slight blur effect which makes the blur in a kind of out of focus way.

Each example was different and had different shadow sizes and blur settings, but did you noticed that the box-shadow attribute had to be declared twice using the moz and webkit:

-moz-box-shadow: 7px 7px 5px #999; /* For shadow effect to work in supported versions of Mozilla */
-webkit-box-shadow: 7px 7px 7px #999; /* For shadow effect to work in supported versions of Safari */

They both muse be applied in the CSS for the shadow effect to work in both browsers. When CSS3 is fully supported you won't have to worry about every single browser, you will be able to use the box-shadow attribute for all browsers, but remember CSS3 isn't fully supported and is still in development due to the many new modules and features that are being loaded in. The reason why we have to use moz and webkit is because Mozilla and Safari use different frameworks and therefore declarations are different.

Example 3 (Shadow on the left):

More examples?! Oh yes! Were not done yet, see all of the above examples showed the shadow effect on right, but what if you want the shadow on the left? No problem the developers have thought of this and come up with a interesting method, we simply take our original starting code:

box-shadow: 10px 10px 5px #999;
padding: 5px 5px 5px 15px;

And add - to the two position values:

box-shadow: -10px -10px 5px #999;
padding: 5px 5px 5px 15px;

This means that the shadow is now on the left rather than the right here's a example:

.box3 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: -10px -10px 0px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: -10px -10px 0px #999;
}

The above code produces this:

The shadow is now on the left with the use of the negative values.

Example 4 (Shadow on the left):

.box4 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: -10px -10px 5px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: -10px -10px 5px #999;

The above code produces this:

Depending on the size of your shadow you will want to adjust the amount of padding accordingly, you don't actually have to add padding for the shadow effect to work, the box-shadow attribute does all the work, but padding will make your divs look nicer and not squashed up, so I suggest you use padding but really it's up to you how much you use.

The best way to remember the positioning when using the box-shadow element is that positive numbers will mean the shadow will appear on the right and negative numbers will mean the shadow will appear on the left.

So there we have it, the shadow effect in CSS3, much more powerful than shadow in CSS2 and much easier to achieve!

Click here to see all four examples