1. Technology

Learn How to Build CSS Drop Shadows

Without Any Images

By

rectangle drop shadow
*nacnud*/Flikr/CC BY 2.0

This page has been updated with more CSS3 information at: CSS3 Shadows: Box Shadows and Text Shadows. The information on this page is still correct and works best for older browsers like IE 6 and Firefox 3.

CSS drop shadows are a great way to add visual interest to a web page without adding a lot of extra download time. Creating drop shadows on elements is almost always done with images only, but it is possible to create drop shadows on elements using just CSS. It is even possible (if ugly and not really accessible) to create drop-shadows of text using just CSS styles and HTML content.

I have never been a huge fan of drop shadows because they are often overdone, and since they are usually done with images, you end up with a page that downloads more slowly without any real value added. But there are ways to create drop shadows using CSS alone, and these don't add nearly as much download weight to the page.

CSS Drop Shadows on Boxes

The easiest element to put a drop shadow on is a box or block element. This is because the element has a pre-defined rectangular shape that the Web browser can easily repeat over and over. To create a drop-shadow on a box element, you simply create a second box element around it and move the second one down and over to create the shadow.

1. Create the main box with content in it. I use the DIV element for my box.

<div class="content">
  <p>
    This is the <code>DIV</code> element that will have the shadow on it.
    You can also shadow images instead of a <code>DIV</code> with content in it.
  </p>
</div>

2. Place a second <code>DIV</code> around the first. This will be display the shadow.

<div class="shadow">
  <div class="content">
    <p>
      This is the <code>DIV</code> element that will have the shadow on it.
      You can also shadow images instead of a <code>DIV</code> with content in it.
    </p>
  </div>
</div>

3. Style the content and shadow. Position them relative to their place in the flow of the document.

.content, .shadow {
  position: relative;
  bottom: 4px;
  right: 4px;
}

4. Give your shadow a color (grey or #ccc is standard).

.shadow { background-color: #ccc; }

5. Style the content text and background. If your background color is the same as the page, be sure to set a border so that the drop shadow shows up better.

.content {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 0.5em;
}

6. If you want the box to be a specific width, put another <code>DIV</code> around the whole thing and set the width on that.

<div class="container">
  <div class="shadow">
    <div class="content">
      <p>
        This is the div element that will have the shadow on it.
        You can also shadow images instead of a div with content in it.
      </p>
    </div>
  </div>
</div>

And the CSS:

.container { width: 200px; }

See an example of drop shadows on a box.

More Help with CSS Drop Shadows

As mentioned at the top, CSS3 box shadows and text shadows are now widely supported in all modern browsers. You should only use this method if you need to support much older web browsers such as IE 6 and lower or Firefox 3 and lower.

CSS3 Shadows: Box Shadows and Text Shadows

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. CSS Tutorials
  6. Learn How to Build CSS Drop Shadows

©2014 About.com. All rights reserved.