theburningmonk.com

CSS3 intro­duces a use­ful lit­tle prop­erty called box-shadow, which as the name sug­gests adds a shadow to an element.

Sim­ple box shadow

You can cre­ate a basic box shadow like this:

div {
    -webkit-box-shadow: 10px 20px #000;  /* for Chrome */
    -moz-box-shadow: 10px 20px #000;  /* for Firefox */
}

This casts a shadow with an X-offset of 10 pix­els and a Y-offset of 20 pixels:

You can equally use neg­a­tive val­ues for the off­sets, which will sim­ply cast the shadow onto the other side of the element:

div {
    -webkit-box-shadow: –10px -20px #000;  /* for Chrome */
    -moz-box-shadow: -10px -20px #000;  /* for Firefox */
}

You might have noticed the use of ven­dor pre­fixes (-webkit for Chrome and –moz for Fire­fox), the rea­son for this is described in my post about the bor­der radius here.

Adding a blur distance

To make the shadow look more real­is­tic, you can blur the shadow by sup­ply­ing an addi­tional parameter:

div {
    -webkit-box-shadow: 10px 20px 10px #000;  /* for Chrome */
    -moz-box-shadow: 10px 20px 10px #000;  /* for Firefox */
}

The higher the num­ber of pix­els the more pro­nounced the effect of the blur is.

Adding opac­ity

What’s more? You can add opac­ity to the shadow to make the shadow semi-transparent, to do this in CSS3 is sim­ple as it intro­duces a new rgba func­tion which you can use to spec­ify the colour of the shadow. Most of you should be famil­iar with how RGBa works (a stands for alpha which is a value between 0 and 1 with 0 being fully trans­par­ent and 1 being fully opaque) already and to use it on a shadow here’s what you can do:

div {
    -webkit-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Chrome */
    -moz-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Chrome */
}

Com­pare the two images below, using solid colour on the left and using RGBa func­tion with alpha value of 0.4 on the right:

As you can see, the shadow on the right look a lot more believable!

Mul­ti­ple shadows

With the box-shadow prop­erty in CSS3, you’re not lim­ited to only one shadow, to spec­ify addi­tional shad­ows sim­ply turn the box-shadow prop­erty into a comma sep­a­rated list of shadow specifications:

div {
    -webkit-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4),
                        -10px 20px 10px rgba(100, 0, 0, 0.4);
    -moz-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4),
                     -10px 20px 10px rgba(100, 0, 0, 0.4);
}

Cre­at­ing an inner shadow

You can cre­ate an inner shadow by adding the inset keyword:

div {
    -webkit-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Chrome */
    -moz-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Firefox */
}

You could cre­ate mul­ti­ple inner shad­ows, though the effect tend to be a lit­tle strange if you ask me..:

div {
    -webkit-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                        inset -10px -20px 10px rgba(0, 0, 150, 0.6);
    -moz-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                     inset -10px -20px 10px rgba(0, 0, 150, 0.6);
}

Or com­bine inner shadow with nor­mal shadows:

div {
    -webkit-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                        10px 20px 10px rgba(0, 0, 150, 0.6);
    -moz-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                     10px 20px 10px rgba(0, 0, 150, 0.6);
}

again, doesn’t feel quite right…

Adding a spread distance

Finally, you can add a ‘spread’ to the shadow, which basi­cally adds some padding to the edges of the shadow:

div {
    -webkit-box-shadow: 10px 20px 0px 10px #000;  /* for Chrome */
    -moz-box-shadow: 10px 20px 0px 10px #000;  /* for Firefox */
}

Com­pare these two images, one with spread of 10 pix­els (left) and one without:

Demo

Finally, here’s a quick demo page I’ve put together to let you play around with the box-shadow prop­erty and see its effects as you change the rel­e­vant para­me­ters, note it only works with webkit browsers (Safari and Chrome) for now as I’m using the new range type input in HTML5 which is not yet sup­ported in Fire­fox and iE.

Ref­er­ences:

CSS3info.com on box shadows