CSS Drop Shadows

So, you want to make your webpage look sorta 3d or maybe you have some other cool effect in mind.  Good news, CSS3 added functionality for drop shadows on everything!

Here’s a quick example from a small chunk of page:


Note the black shadows around the div elements.

Turns out, this is super easy to add to a page!

Simple enough:

box-shadow: 0px 5px 5px rgba(0,0,0,0.5);

That’s literally it!  Well, for proper CSS enabled browsers.  For Firefox and Safari and IE, you’ll need to add some extra lines:

-moz-box-shadow: 0px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);

Now it’s properly cross-browser compatible.  But what’s all this mean, then?

The box shadow property needs four values to work.  The first two are the x and y offsets, respectively, for your shadow.  If you want the shadow to face upwards, you’d put something like

box-shadow: 0px -5px 5px rgba(0,0,0,0.5);

if you wanted it to go to the right,

box-shadow: 5px 0px 5px rgba(0,0,0,0.5);

And of course, you can increase the number to increase the size of the shadow.

The third number is the fade distance.  To make a darker, more condensed shadow, you’d want to set this lower than your offset values.  If you wanted a real diffused shadow, you’d set it higher.

The last value is, obviously, the color.  You’ll want to make sure you use the rgba( ) format rather than specifying the hex code (#000000) or regular rgb(0, 0, 0), because you’ll want to specify the transparency of the shadow, typically.  This value can be anywhere between 0 for invisible to 1 for completely solid.  Of course, because you’re specifying a color value, you’re not limited to black.  You can add blue or red or purple shadows if you so desire!  This can give kind of neon-backlight look.


Experiment with it, and you can achieve all sorts of cool effects!

Unfortunately, as best as I can tell, it’s impossible to limit a shadow entirely to the x or y direction, without it bleeding out a little bit around the edges, as seen around ‘contact’ and ‘engcmp610’ in the above screencap.  I’m open to being corrected on that point.

-K Magocs

~ by kylemagocs on October 1, 2012.

%d bloggers like this: