LWD logoLori's Web DesignLWD logo

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

Drop shadows were designed to work on any box or block level element (divs or paragraphs) which means you need to put images within a div or paragraph tag of the same size to produce a drop shadow on an image. The drop shadow property produces a nice 3-D effect to any object on a web page.

The new CSS3 specification for drop shadows (box-shadow) works in all modern browsers as long as you include all 3 options:
  • webkit-for Safari
  • moz box shadow for older Mozilla/Firefox
  • box shadow for other browsers.

Anatomy of 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 forth 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

For a light gray drop shadow under images add the following to your CSS file or a style tag in the head of the page (you may want to adjust the width of the image, color and depth of the drop shadow):

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


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

<div class="dropshadowimag">
<img src="images/IMAGE NAME GOE HERE.jpg" width="400" height="304" border="0" alt="DESCRIBE THE IMAGE HERE">
</div>


If you want the image centered on the page add this style tag to the div containing the image: style="margin:0 auto 0 auto;"

The resulting image should have a very light drop shadow like the image above.

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 or a style tag in the head of the page:

.dropshadowtext
    { width:400px;
    padding:10px;
    background:#cccccc;
    border:2px solid #999999;
    -moz-box-shadow: 5px 5px 5px #999;
    -webkit-box-shadow: 5px 5px 5px #999;
    box-shadow: 5px 5px 5px #999; }


If you want the text box centered on the page add this style tag to the div containing the text: style="margin:0 auto 0 auto;"


Google


Return to CSS TIPS

order SEO analysis

Lori Eldridge
Copyright © April 15, 2012
All Rights Reserved


You can also set up an inner shadow (inset), apply it to elements with rounded corners, layer multiple shadows and other values. For more info see: CSS3 Box Shadow

Twitter     Google+     Facebook     linked in