Skip to navigation


Look! It’s like someone’s shining a torch over my web page!

You can give parts of your page “pop” by applying shadows both to boxes and to text.

Box Shadows

box-shadow is the standard CSS property to get you going and it can have a value comprising several parts:

box-shadow: 5px 5px 3px 1px #999

Inner shadows

You can also apply shadows to the inside of a box by adding “inset” to the list:

box-shadow: inset 0 0 7px 5px #ddd;


A basic drop-shadow and an inner-shadow.

Text Shadows

box-shadow, as its name implies, only has eyes for boxes. Fickle beast. But you can also apply shadows to the outline of text with (surprise!) text-shadow:

text-shadow: -2px 2px 2px #999;

Similarly to box-shadow:

Note that there is no spread distance or inset option for text-shadow.