CSS3 - Text Shadow

There were quite a number of things proposed in CSS 2 that were dropped from CSS 2.1 because no browser had implemented them and it looked like it would be a long time if ever before any browser would. A number of these were reinstated in CSS 3 including some of those intended for styling text.

One such CSS property is text-shadow which allows you to add shadows to your text. Actually it is a bit more powerfulo than that as it can also produce other effects by combining multiple shadows together on the same text.

The simplest version of the text-shadow property takes two values to specify the horizontal and vertical offsets of the shadow respectively. The colour of the shadow will be the same as the text you are applying the shadow to if you use this version of text-shadow but you can easily make the shadow a different colour by adding the colour you want to the end of the command.

Another value that you can add into the definition of your shadow is the blur radius to use. This will cause the applied shadow to blur into the background rather than having a clearly defined boundary. This is also specified as a size with a larger size making for a wider blur. The blur raduis can also be used with zero offsets to produce outlined letter effects.

There is one more variant that is allowed with text-shadow and that is to be able to add multiple shadows to the same text by providing the above options multiple times as comma separated values.


h1 {text-shadow: 3px 3px #ccc;}
h2 {text-shadow: 2px 2px 3px #ccc;}
h3 {color:#fff; text-shadow: 0 0 3px #000;}
.lp {color:#333; text-shadow: 0 1px #666, 0 -1px #000;}


Note that at the time of writing this property is supported by all of the major browsers except Internet Explorer. It does degrade gracefully though for those browsers that don't support it as anyone using those browsers will simply see the text without any shadows.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow