CSS3 Drop Shadow Example

One of the coolest new feature of using CSS3 is giving the effect of drop shadow to images, buttons, etc. without having to get your hands dirty with software such as Adobe Photoshop, Adobe Fireworks, etc. Here is a 1 line solution that you can use in your CSS to instantly apply CSS3 Drop Shadow effect.

CSS3 Drop Shadow: 1 line solution

box-shadow: 1px 2px 5px 3px #CCC;

Breakdown of the above values:

box-shadow – New property introduced in CSS3 to generate shadow effects.

1px – Thi is the Horizontal offset. Both positive and negative values are entertained.  A positive value for the Horizontal offset draws a shadow that is offset to the right of the box. A negative length draws a shadow that is offset to the left of the box.

2px – This is the Vertical offset. Both positive and negative values are entertained. A positive value for the Vertical offset basically offsets the shadow down, a negative one up, while the negative value does the opposite.

5px – This is the Blur Radius. Allows only Positive  values.  The larger the value, the more blurry the shadow’s edge appears.

3px – This is the Spread distance. Both positive and negative values are entertained. Positive values cause the shadow shape to expand in all directions by the specified radius whereas negative values cause the shadow shape to contract.

#CCC – This is the color of the shadow.

You can also apply multiple shadows using a single CSS declaration:

box-shadow: 1px 2px 5px 3px #CCC, 0 0 6px rgba(0, 0, 0, .7) inset;

So using our basic example, let’s quickly create a box and apply our simple solution:

<style type="text/css">
#a {
box-shadow: 1px 2px 5px 3px #CCC;
width: 100px;
height: 100px;
}
</style>

<div id="a">I am a box</div>

This gives us the following:

Browser Support

Internet Explorer 9/10
Firefox (from 3.5)
Safari/Chrome
Opera (from 10.5)

Your turn!

Do you know of any other simple ways to provide CSS3 Drop Shadow effect to elements of your web page? If yes, please feel free to share by commenting below.