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

The HTML:

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 http://AquariumFishExporter.com.
Posted by PohEe.com 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 www.cssplay.co.uk. 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 http://finaltouchinteriors.com 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 www.cssplay.co.uk. He shows on his web site techniques with CSS only, another link is 456bereastreet.com/lab/teaser/flexible/
both are great in using CSS.
Posted by anton on 01/22, 06:14 PM
no image, cool, thanks..
Posted by portal.im 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-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.