Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: DIVs and containers: Here

CSS Gradient Shadow

Author: Michael Burt

This is a CSS and JavaScript technique that lets you add a shadow to most elements on your page with a customizable shadow depth and coloring. Just give the element in question a class name of "shadow" to activate the effect.

The CSS:


Code Info

Rate this code:

Date Posted: 01/14/2007

Revision History: None

Usage Terms: Click here

Your Comments (62)

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 7 pages  1 2 3 >  Last »

Nice article. I am going to implement it soon. Let's wait and see at
Posted by on 01/15, 12:02 AM
This is a very nice way of adding shadows to pictures. Great work.
I adapted on my website a similar approach to show shadows on pictures. It is from Stu Nichols This particular way of using shadows uses only CSS.
Posted by anton on 01/15, 09:15 AM
Can this be made to have it so the top-right and bottom left corners are straight, instead of diagonal? And a softer shadow?
Posted by MarioGamer99 on 01/15, 12:19 PM
looks useful. but i noticed that in firefox, increasing/decreasing the text size caused the whole layout to be "corrupted". i don't think that it would be the best idea for accessibility.
Posted by nepalsites on 01/19, 06:22 AM
Good observation. I did not see that either.
I think this could be avoided with a little bit tinkering on the CSS Side. As in my Case in this does not happen, but I also don't use Javascript to create the Shadows.
Posted by anton on 01/19, 09:22 AM
Great techique DD, but can't this be done with the use of JS. I'd like to see everything kept strickly CSS.
Posted by Kiazen Maven on 01/22, 05:47 PM
Stu Nichols from He shows on his web site techniques with CSS only, another link is
both are great in using CSS.
Posted by anton on 01/22, 06:14 PM
no image, cool, thanks..
Posted by on 02/05, 10:55 AM
nice script....but can it smhow b used to giv an entire pg a shadow?
Posted by mandar on 02/05, 01:19 PM
You might want to add a ; after the z-index lines in the css. It may not have any adverse affect, but it's one of those things that would be better done than left as is...
Posted by Jonathan Young on 02/09, 08:58 PM

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

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