How to add a Drop Shadow to an Image with CSS

You can add a drop shadow to an image by using the CSS box-shadow property which produces a nice 3-D effect to images or other objects on a web page.

The drop shadow property is designed to work on block level elements (divs or paragraphs). It will, however, also work on an image (which is an inline element) if you edit the HTML and CSS as shown below.

Box-shadow works on any browser that supports CSS3. Anyone viewing it on an older browser will not see a drop shadow.

dropshadow

Explaining 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 box 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:

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 at the top of the page.

If you want to set more than one drop shadow style then just add another class, i.e., dropshadowimg2, etc.


How to Remove White Space Under images

If your image has a white space between the image and the drop shadow it is because images are inline elements and need to be treated as block elements for this to be corrected. In that case 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):

<img src="images/blue-bird.jpg" alt="blue bird" 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 (adjust width and padding settings to your own preference). Then add this class to the div or paragraph tag surrounding your text:

.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;

You can also make rounded corners on text boxes with rounded drop shadows by adding "border-radius" to a text box:

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

This is a text box with a border, a drop shadow and rounded corners.

For more info on this topic (including inset, text shadow, etc.) see w3schools instructions on the Box-shadow property.

Return to CSS TIPS

Lori Eldridge
Copyright © April 15, 2012 - updated 12-18-20
All Rights Reserved