Creating subtle shadows with CSS only

19 Feb 2011

CSS3 has some good features one of which is the "box-shadow" property, here's a short tutorial on how to create a subtle outer shadow effect and also an inset effect.

Offset example

The code:

.my-div {

  -moz-box-shadow: 5px 5px 5px #ccc;

  -webkit-box-shadow: 5px 5px 5px #ccc;

  box-shadow: 5px 5px 5px #ccc;

}

What it looks like:




Inset example

The code:

.mydiv_inset {

  -moz-box-shadow:inset 0px 0px 10px #888;

  -webkit-box-shadow:inset 0px 0px 10px #888;

  box-shadow:inset 0px 0px 10px #888;

}

What it looks like:




The Syntax

box-shadow: -horizontal offset- -verticle offset- -blur radius/spread- -colour-

You should also include "-moz-box-shadow" and "-webkit-box-shadow" properties for Firefox and Safari to work.

Live demo link

You can experiment with the offset values and blur radius so get a huge array of different effects - all without a single image! :)

---