Creating Shadows with CSS3

CSS3 has introduced some cool effects that give you control over elements of design that were once only possible using images. One of the new effects I have been having a lot of fun with lately is the box shadow. Many, if not all, of the new CSS3 effects only work on Safari 4, Firefox 3.5 and Google Chrome. Just one more reason to make sure to use one of those browsers.

It is easy to create a shadow effect with CSS3 by using the box-shadow style. There are six variables which the style accepts.

Inset
Creates a shadow on the inside of the element instead of on the outside.

Horizontal length
The amount of positive or negative space on the X axis between the shadow and the main element.

Vertical length
The amount of positive or negative space on the Y axis between the shadow and the main element.

Blur radius
The amount of blur on the shadow. Minimum of zero.

Spread radius
The amount of spread defines a larger or smaller shadow.

Color
The color of the shadow.

Basic example:

box-shadow: 6px 6px 12px #000000;
-webkit-box-shadow: 6px 6px 12px #000000;
-moz-box-shadow: 6px 6px 12px #000000;

Demo:

This is an example of the new box shadow style in CSS3.

The color variable accepts a hex code (#000000), name (black) or rgb code(0,0,0). It also accepts rgba, which allows for an alpha channel. Using rgba gives you the ability to add opacity to your shadow to soften it and let the background color through.

Example with alpha transparency:

box-shadow: -10px 10px 20px rgba(0, 0, 0, .5);
-webkit-box-shadow: -10px 10px 20px rgba(0, 0, 0, .5);
-moz-box-shadow: -10px 10px 20px rgba(0, 0, 0, .5);

Demo:

 
Creating an inner shadow requires the inset variable.

Inset example:

box-shadow: inset 1px 1px 10px #111111;
-webkit-box-shadow: inset 1px 1px 10px #111111;
-moz-box-shadow: inset 1px 1px 10px #111111;

Demo:

This is an example of the new box shadow style in CSS3 using the inset variable.

 
You can easily set whether you want the shadow to larger or smaller that your main element by adding an amount to the spread variable.

Inset example:

box-shadow: 0px 16px 10px -10px #444444;
-webkit-box-shadow: 0px 16px 10px -10px #444444;
-moz-box-shadow: 0px 16px 10px -10px #444444;

Demo:

This is an example of the new box shadow style in CSS3 using a spread amount.

 
There are tons of possibilities and if you really want to go crazy you can define multiple shadows. Just separate them all by commas.

Multiple shadows example:

box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;
-webkit-box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;
-moz-box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;

Demo:

This is an example of the new box shadow style in CSS3 with multiple shadows defined.