Although the W3 (World Wide Web Consortium) have sent out CSS3 (New version of the CSS language) to various browser company's such as Mozilla and Safari. Support for it is not high enough, so some of the great attributes that CSS3 will be bringing in such as box-shadow which allows you to add shadow (that we will be creating in this tutorial) with one attribute. So we're going to have stick to CSS2! Creating shadow in CSS2 is a question that's pretty popular amongst the web-dev community as there's no straight attribute to create it, instead to create it one method you can use is a transparent .png image along with one special div defined before any other content/divs on your webpage.

Step 1: Prepare your workspace

Get open any kind of code editor which will be available to enter HTML and CSS into, and also able to save documents for the web via extensions such as .htm.

Step 2: The XHTML document:

To create a shadow we will need to have two divs. One will be the content div which in this tutorial will be called box and the other will be of course the shadow div (Take a guess at what the div will be named)

Nothing to complex this is the XHTML for it:

<div class="box">
<h3>Shadow in CSS2</h3>
<p>This is a box and it has a nice shadow. And generally gives this content box a little edge. Compared to just a border, although this method is quite annoying, in CSS3 we will be rewarded with an attribute called box-shadow, which will be able to achieve this by defining one attribute. HURRAY! </p>
<p>The shadow generally involves getting the right width which is relative to the .png image that  is being defined in the CSS to make the shadow effect.</p>
</div>
<!--Also works if you wanted to start a new div-->
<div class="box">
<p>The content in here is within a new div. The shadow effect continues to display, without any problems.</p>
</div>

I decided to write a little story about shadow to make sure you could see the shadow clearly, but basically to show how the shadow stretches to the height of the box div. At the moment though you'll just see non-styled content, but hopefully it will make sense to you later when we cover the CSS part

Step 3: The CSS part

Like I said there's two divs box and shadow box is for the content and shadow is for the obvious factor in question!

Here is the CSS needed for the two divs:

#shadow {
background-image:url(gradient_shadow.png); /*Shadow image. MUST BE PNG IF TRANSPARENCY IS REQUIRED*/
width:335px; /*Width of the shadow. Set at around 35px bigger than the content width. Needs to be wider than the box div for it to show up!*/
margin:0px auto;  /*Margin needs to be defined, for additional positioning depending on what shadow effect you want*/
}
.box {
width:300px; /*Width must be defined in both divs, otherwise the sky will be falling on your head*/
background-color:#999999;
padding:10px; /*We all love padding right!*/
color:#ffffff;
margin:0px auto; /*Margin in shadow div needs to match this, unless you want a uneven shadow*/
border-bottom:1px dashed #ffffff; /*Added to show the new div in the example. Remove if not needed*/
}

Commented out ready for you to read and review yourself, but I will add in some notes to be aware of.

If you would be requiring to use shadow on a page that has different background colour than white then you will need to use a transparent image. And the format to use would be a png image.

Your shadow width must be greater than the defined width in the box div. Typically about 35px wider to get the effect that's in the example. You can reduce it so you get a smaller shadow, it's really up to you. But bare in mind that you can't increase the shadow width to like 400px as the width set in the shadow div is relative to actual shadow image. So to create a bigger shadow this would require making the shadow image 400px in width.

Step 4: The Shadow image itself

The shadow itself is a image thats positioned and defined in CSS, but CSS doesn't create the effect. It involves using some sort of design software and knowledge of creating gradients.

The image to create the shadow in the example is this:

(Right click and save it locally)

How this shadow image works is a small gradient is on each side of the image which is set to Black - Transparent. So the colour starts black but as it gets to the edge it goes to the colour of the whatever is set, but because it's set to transparent it will go to whatever colour background it is set on a webpage. That's why I made it clear you will quite possibly need to create a transparent .png image

You can create this in many photo editing/design software applications such as Photoshop, Paint.Net (Free) and others, whatever program you create it in doesn't matter as long as it has the ability to create gradient colours your all good.

Step 5: Putting it all together:

We've done everything we need to in both the XHTML and CSS now it's time to put it altogether:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Shadow in CSS2</title>
<style type="text/css">
#shadow {
background-image:url(gradient_shadow.png); /*Shadow image. MUST BE PNG IF TRANSPARENCY IS REQUIRED*/
width:335px; /*Width of the shadow. Set at around 35px bigger than the content width. Needs to be wider than the box div for it to show up!*/
margin:0px auto;  /*Margin needs to be defined, for additional positioning depending on what shadow effect you want*/
}
.box {
width:300px; /*Width must be defined in both divs, otherwise the sky will be falling on your head*/
background-color:#999999;
padding:10px; /*We all love padding right!*/
color:#ffffff;
margin:0px auto; /*Margin in shadow div needs to match this, unless you want a uneven shadow*/
border-bottom:1px dashed #ffffff; /*Added to show the new div in the example. Remove if not needed*/
}
</style>
</head>

<body>
<div id="shadow">
<div class="box">
<h3>Shadow in CSS2</h3>
<p>This is a box and it has a nice shadow. And generally gives this content box a little edge. Compared to just a border, although this method is quite annoying, in CSS3 we will be rewarded with an attribute called box-shadow, which will be able to achieve this by defining one attribute. HURRAY! </p>
<p>The shadow generally involves getting the right width which is relative to the .png image that  is being defined in the CSS to make the shadow effect.</p>
</div>
<!--Also works if you wanted to start a new div-->
<div class="box">
<p>The content in here is within a new div. The shadow effect continues to display, without any problems.</p>
</div>
</div>
</body>
</html>

That's all there is to it one image and one div thats defined in the XHTML before anything else will get the shadow effect applied to it, but if you don't fancy using a image you could use a very basic alternative method by using borders:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic CSS Shadow using borders</title>
<style type="text/css">
.box {
color:#ffffff;
width:300px;
padding:20px;
background-color:#999999;
border-right:3px solid #000000;
border-bottom:3px solid #000000; }
</style>
</head>

<body>
<div class="box">
<h3>Shadow using borders</h3>
<p>Random Content. Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
<p>Random Content. Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
</div>
</body>
</html>

Doesn't really have the same a effect, but it's a basic way of doing it.

Preview the shadow effect:
Live Example
Shadow Image