Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: DIVs and containers: Here

CSS Drop Shadows

Author: Dynamic Drive

This examples shows how to add a drop shadow to any container element using only CSS (no images). It does this by wrapping the desired content in a DIV with its background color set to the desired shadow color. The content itself is relatively positioned and shifted slightly upwards and to the left to expose the shadow. A "master" DIV that surrounds the entire markup is also relatively positioned, but shifted to the right and downwards to return the entire markup to its original position on the page. The result is a rather rigid- but instant- shadow.

IE 6 has difficultly handling nested relatively positioned elements (yada), so instead of letting IE6 ruin the fun for everyone else, we'll just use conditional HTML to hide the effect in that browser. IE7 is spared for finally learning proper CSS.

Note: If you're applying the shadow to an image, like in the second example below, you should give ".shadowcontainer" an explicit height reflecting that of the image's.

Demo:

Some title
Some text here. Some text here.
Some text here. Some text here.
Some text here. Some text here.
Some text here. Some text here.


The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (35)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 4 pages  1 2 3 >  Last »

I have a suggestion for IE6, you can use a CSS filter like the one shown below:

(put this in a stylesheet):

filter:progid:DXImageTransform.Microsoft.dropshadow(OffY=PIXELS, OffX=PIXELS, color=COLOR, positive=TRUE/FALSE);

Be sure to replace PIXELS, COLOR, and TRUE/FALSE with the amount of pixels, a color, and true or false.
Posted by David K on 05/08, 05:12 PM
I use drop shadows on my site (http://www.eklekt.com/), and as far as I can tell, they work on most (if not all) browsers. I used a modified version of the style found at http://www.maujor.com/w3ctuto/shadows-demo.html. There is no need for the "shift container" - just make sure the outer container has enough margin that the negative margin on the inner container won't flow out into other elements. I did it a while ago and don't remember exactly what the key to getting it to work in IE is (maybe forcing a strict doctype?). But feel free to poke around.
Posted by Jesse on 05/10, 02:30 PM
How do you put two together side by side...
Posted by peter on 06/16, 01:51 PM
It looks ok, but the shadow would look better if it was a gradient. This script can cause a very powerful effect though.

* I recommend this script.
Posted by Nathan on 06/16, 05:14 PM
This works fairly well, with some adjustments, but as far as I can tell, it's not optimal CSS in that it must be altered for each different image.

As a result, I can't use it in index.css. Further, to place all new code in each separate instance creates file management issues.

It might be easier all around just to create my own drop shadows in Photoshop.
Posted by Sledge Formblan on 06/24, 02:56 PM
Since I am already using CSS, I just pasted the code into my stylesheet and used David K's suggestion. Works like a charm! Thanks!
Posted by Lawrence on 07/30, 06:44 PM
I always love drop shadows minus the headache of Photoshop or any other imaging program.
This drop shadow CSS worked well for us in ie, firefox, opera, and seems pretty solid.

Thanks!
Posted by SEO Position on 08/20, 01:40 PM
I get CSS errors in Firefox. An example would be "<![if !IE 6]>". Does anyone else get these errors? Just curious.

-Great script.
Posted by The Land of IA on 08/28, 02:34 PM
It looks ok, but the shadow would look better if it was a gradient. This script can cause a very powerful effect though.
Posted by Pozycjonowanie on 11/03, 01:09 PM
nice effect but whats the difference between this and the other shadowed effect one?
Posted by free tv on 11/12, 05:37 PM

Comment Pages 1 of 4 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.