Drop Shadows on Elements

box-shadow

Note: It is possible to put a drop shadow on your text.

CSS3, Please! has a good interactive way of testing this property. The CSS property box-shadow will allow you to put a drop shadow on any block element.

The value list takes the parameters:

  • x-distance (required)
  • y-distance (required)
  • blur (integer, optional)
  • spread (integer, optional)
  • color
  • inset (boolean)
box-shadow:6px 10px black
inset 40px -20px #FF0;
box-shadow: 5px 5px 5px #988C71;
box-shadow: 0px 0px 10px 5px rgba(0,64,0,0.3) inset;

A typical gray shadow would use this:

box-shadow: 5px 5px 10px rgba(0,0,0,0.25);

Notice that it is possible to specify multiple shadows (as shown in the first box). Also, for IE you will need to have border-collapse set to "separate".

Advanced Shadows

Using nothing more than some tricky CSS you can create some amazing shadows right in the browser (no need for images). Check out the demo and article.    I’ve saved a copy here.

What makes this technique so awesome is the boxes, with their shadows, can be dynamically sized (whereas an image is going to be a fixed size, or at the very least scales non-proporionately.)