CSS3 Box Shadow

One of the most wanted features in CSS3 is giving a shadow effect to an attribute. This effect was previously achieved by applying images to attributes using css2. You needed to created extra divs in case of box-shadow or a whole image if you want to apply shadow to text. This way of working was cumbersome and it was not always easy to apply slight changes without having to recreate the used images.

Box-Shadow

The Box-Shadow property can be applied to all elements and requires 4 parameters and has an optional fifth.

• First you have the horizontal offset of the shadow towards your element.
• Second you have the vertical offset
• Third parameter is the blur distance. No negative values allowed.
• Fourth is the color of your shadow.
• The optional fifth parameter is the ‘inset’ keyword which indicates that the box-shadow should be an inner shadow instead of the standard outer shadow.

When having a border radius applied to your element then so will the box-shadow for this element have round corners.

Box-Shadow Examples

box-shadow: 5px 5px 3px #666

The code above will give following result:

A box with a blurry gray shadow

As you can see due the positive values in both the first and second offset the shadow is positioned to the right bottom. Increasing the value of the blur distance will make the shadow more blurry. Setting the value to zero will give a clear shadox. Due to the box-shadow property still being in experimental phase does the property need to be lead by a layout engine prefix.

box-shadow: 5px 5px 3px #999 inset

A box with a inner shadow

Often will shadow be put centered behind an element to give it a more glowing or darker effect. below you see the example with rounded corners. This is often used among this website. You notice the offsets have been set to zero and the blur heavily increased.

box-shadow: 0px 0px 15px #999

A box with a centered shadow and rounded corners