Having fun with CSS3 — Box Shadow property

CSS3 intro­duces a use­ful lit­tle prop­er­ty called box-shad­ow, which as the name sug­gests adds a shad­ow to an ele­ment.

Simple box shadow

You can cre­ate a basic box shad­ow like this:

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

This casts a shad­ow with an X-off­set of 10 pix­els and a Y-off­set of 20 pix­els:

image image

You can equal­ly use neg­a­tive val­ues for the off­sets, which will sim­ply cast the shad­ow onto the oth­er side of the ele­ment:

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

image

You might have noticed the use of ven­dor pre­fix­es (-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 shad­ow look more real­is­tic, you can blur the shad­ow by sup­ply­ing an addi­tion­al para­me­ter:

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

image

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

Adding opacity

What’s more? You can add opac­i­ty to the shad­ow to make the shad­ow semi-trans­par­ent, to do this in CSS3 is sim­ple as it intro­duces a new rgba func­tion which you can use to spec­i­fy the colour of the shad­ow. Most of you should be famil­iar with how RGBa works (a stands for alpha which is a val­ue between 0 and 1 with 0 being ful­ly trans­par­ent and 1 being ful­ly opaque) already and to use it on a shad­ow 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 sol­id colour on the left and using RGBa func­tion with alpha val­ue of 0.4 on the right:

image image

As you can see, the shad­ow on the right look a lot more believ­able!

Multiple shadows

With the box-shad­ow prop­er­ty in CSS3, you’re not lim­it­ed to only one shad­ow, to spec­i­fy addi­tion­al shad­ows sim­ply turn the box-shad­ow prop­er­ty into a com­ma sep­a­rat­ed list of shad­ow spec­i­fi­ca­tions:

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);
}

image

Creating an inner shadow

You can cre­ate an inner shad­ow by adding the inset key­word:

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 */
}

image

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);
}

image

Or com­bine inner shad­ow with nor­mal shad­ows:

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);
}

image

again, doesn’t feel quite right…

Adding a spread distance

Final­ly, you can add a ‘spread’ to the shad­ow, which basi­cal­ly adds some padding to the edges of the shad­ow:

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 with­out:

image image

Demo

Final­ly, here’s a quick demo page I’ve put togeth­er to let you play around with the box-shad­ow prop­er­ty 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­port­ed in Fire­fox and iE.

References:

CSS3info.com on box shad­ows