CSS Shadow

Adding a shadow under box displaying a text or an image can be done in HTML and CSS with no JavaScript or framework.

The idea is to nest layers into one another, with a lag and a background color gradually darkened hue.

<div class="box" style="width:400px">
    <div class="offset color1" >
        <div class="offset color2">
            <div class="offset color3">
                <div class="offset inner">
                        Message
                </div>
            </div>
        </div>
    </div>
</div>

Just insert this code in the page and link the style sheet that makes the shadow (in the demo, the CSS code is inside the HTML page).

Here is the CSS code for the offset and the colors:

.offset { position: relative; left:-1px; top:-1px; }
.color1 { background: #F0F0F0; }
.color2 { background: #DBDBDB; }
.color3 { background: #B8B8B8; } 

The width of the box shall be specified in the HTML code if you use different size boxes.

In the case of an image, you must also specify the image size for the layer that contains it, and a padding to 0, contrary to the text that should have a margin.

div class="offset inner" style="padding:0;height:400px;width:258px" border="0" >
    <img src="images/20.jpg" />
</div>

Demonstration

• Text or image box with a shadow.

Using an image

The previous method has the advantage of using only CSS code, but requires that you insert a big block of HTML code.

This can be simplified by using an image to create the shadow of the box. To do this we draw an image with a white background and a gray gradient on the right and bottom side. Here is this image.

This image is used with this CSS code:

.shaded
{
    background: url(images/shadedborder.gif) no-repeat bottom right;
} 

The image becomes the background of a container that contains either another layer for a text message, or directly an img tag.

In the second case the HTML code is minimal:

<div class="shaded" style="height:410px;width:268px">
    <img src="images/20.jpg" />
</div>

In the first case, an internal container must be added again:

<div class="shaded" style="width:400px;">
<div class="inner">
...content...
</div>
</div>

The img tag and the inner layer are shifted by a few pixels to left and up against the outer container to reveal the shadow on the right and down sides.

Demonstration

• Shadow on a box made with an image. The CSS code is included in the demo page.
• The GIF image.

(c) 2009 Xul.fr
Licence: You are free to use the code of this tutorial to motorize your own site. Please do not put the tutors and other files on another website, add a link to the article instead. But you can print the pages and distribute them along with the code for educational purpose.