LWD logoLori's Web DesignLWD logo

How to add a Drop Shadow to an Image or Text Box with CSS3

The drop shadow, or box-shadow property, produces a nice 3-D effect to objects on a web page. They are designed to work on block level elements (divs or paragraphs). It will, however, work on an image (which is an inline element) if you edit the CSS (see below).

Box-shadow works on any of the following browsers that support CSS3: IE9, Firefox4, Chrome10, Safari5.1 and Opera10.5. Anyone viewing your drop shadow on an older browser will not see a drop shadow.

Box-shadow will work in older browsers if you include these options:

  • -moz-box-shadow: 5px 5px 5px #999; (for Firefox)
  • -webkit-box-shadow: 5px 5px 5px #999; (for Safari, Chrome and Opera)
  • -ms-box-shadow: 5px 5px 5px #999; (for IE)

The following is assuming you are designing with CSS3 in mind, so the other two options are left out of the code on this page.

The drop shadow code:

box-shadow:5px 5px 5px #999;

  • The first value (5px) controls the x-offset (horizontal width of shadow on right side)
  • The second value (5px) controls y-offset (vertical width of shadow on the bottom)
  • The third value (5px) controls the blur distance (width of the shadow)
  • The fourth value (#999) controls the color of the drop shadow.

You can also add a negative value to the first and second values if you prefer the shadow on the top or left side. Another value called "inset" can be used if you want to create an inner shadow, i.e., for making a button effect.


How to add a drop shadow to an image:

dropshadow

I am calling this class "dropshadowimg" but you can name it whatever you want. For a light gray drop shadow under images add the following to your CSS file (you may want to adjust the width of the image, color and depth of the drop shadow):

.dropshadowimg
    { width:200px;
    box-shadow: 5px 5px 5px #999; }

Add this class (dropshadowimg) to a div containing the image in the html file like this:

<div class="dropshadowimg">
<img src="images/IMAGE NAME GOES HERE.jpg" width="400" height="304" alt="DESCRIBE THE IMAGE HERE">
</div>

If you want the image centered on the page add this to the div surrounding the image:

margin:0 auto;

The resulting image should have a very light drop shadow like the image above. If your image has a white space between the image and the drop shadow set up this class in your CSS file (separate from the dropshadowimg class):

.block {display:block;}

Then add this class to the image tag (not the div):

class="block"


How to add a drop shadow to a text box:

Sometimes it helps break up pages with a lot of text if you add a box around a small portion of text with a background, a border and drop shadow. You may want to adjust the width, padding around the text, background and border of your box along with adjusting the color and depth of the drop shadow as specified below.


To set up text with a drop shadow add this to your CSS file:

.dropshadowtext
    { width:400px;
    padding:10px;
    background:#ccc;
    border:2px solid #666;
    box-shadow: 5px 5px 5px #999; }

If you want the text box centered on the page add this to the div containing the text:

margin:0 auto;

For more info on this topic see w3schools instructions on the Box-shadow property.

Lori Eldridge
Copyright © April 15, 2012 - updated 4-22-17
All Rights Reserved

Return to CSS TIPS


Google


Twitter     Google+     Facebook     linked in