I’ve seen a good few tutorials on the css3 box-shadow but none about the inner shadow attribute of it, so i thought I’d show you here.

Here’s our div with a few basic bits of styling:

Then when we add box-shadow:inset 0 0 10px #000000; to the css it becomes:

Don’t forget that this property is only available on Firefox as far as i know but I’ve included both box-shadow:inset 0 0 10px #000000; and -moz-box-shadow:inset 0 0 10px #000000; in my css to futureproof it for when more browsers support it.

Here is a screen shot for people using other browser’s than Firefox.

For more information on this property visit:
http://www.w3.org/TR/css3-background/#the-box-shadow

Any comments? Just drop them in the box below.