Box shadow's are a new feature to CSS3.

The box-shadow property allows Front-Enders to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

The box-shadow property can accept a comma-serparated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional ‘inset‘ keyword (to create an inner shadow, rather than the default outer shadow).

Current Browser Support:

  • Mozilla (Firefox)
  • Webkit (Safari/Chrome/Konqueror)
  • Opera and the IE9 Platform Preview
  • although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

Here are a few examples of implementations I'm using at

-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
box-shadow: 0 0 10px #000;


-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: 1px 1px 2px #757575;
box-shadow: 1px 1px 2px #757575;



-moz-box-shadow: 1px 1px 2px #757575 inset;
box-shadow: 1px 1px 2px #757575 inset;


This one works great for input elements that you want to look like they are cut out of the page. It looks especially good when using with a matte background.

If you need more detail information check out: