A Blog in Suburban Glory: Web Design Ideas and Inspiration

This is a technique I discovered by accident when creating the Drupal Sunset theme.

The purpose of the box-shadow property is self-explanatory – it creates a shadow around an element.

I've used box-shadow quite a few times in the past and it is an impressive addition to the CSS stable. I've tried to find an alternative for IE - using either filters or JavaScript - but I haven't found one that works properly yet.

Here's an example of the code:

-webkit-box-shadow:5px 5px 5px #999999; 
-moz-box-shadow: 5px 5px 5px #999999; 
box-shadow:5px 5px 5px #999999; 

The three measurements in order are the horizontal offset, the vertical offset and the blur radius.

Here's how this would look in Firefox, Chrome or Safari – the only browsers to read this CSS3 feature so far:

It produces an attractive grey border.

Lets change the code:

-webkit-box-shadow:0 0 15px #ffffff; 
-moz-box-shadow: 0 0 15px #ffffff; 
box-shadow:0 0 15px #ffffff; 

Reducing the horizontal and vertical offset to zero, increasing the blur radius and changing the shadow colour to white so that there is a more striking contrast between the foreground and background creates this:

As you can see it creates quite a pleasant glow and it degrades gracefully as the browsers that don't recognise box-shadow merely see a border.