CSS3 Text-shadow – add shadow to your text in CSS3

The css3 property text-shadow allows to add one or more shadows to a text content.

NB: the simple shadow are actually supported by Safari, Opera 9.5+ and Firefox 3.1+

Next, we will see the different values for the property text-shadow, how to apply them to a text and their final resut with some concrete example.

Basically, text-shadow needs 2 values:

• the shadow’s lenght in unit of measurement or percentage on the horizontal axis
• the shadow’s lenght in unit of measurement or percentage on the vertical axis

Example of css rules:

text-shadow:5px 5px;

Preview done with Opera 9.6:

The result:

Css3 Text Shadow

A third value can be added to specify a different shadow’s colour from the text colour

If a shadow’s colour is not specified, by default, it will have the same colour of the text, as seen in the above example.

Example of css rules with a specific shadow’s colour:

text-shadow:#666666 5px 5px;

Preview done with Opera 9.6:

The result:

Css3 Text Shadow

The 2 lenght values can be positive for a shadow to the right bottom of the text (as in the above example) or negative for a shadow to left top of the text (as in the following example):

Example of css rules with both negative values:

text-shadow:#666666 -5px -5px;

Preview done with Opera 9.6:

The result:

Css3 Text Shadow

Example of css rules with one negative, one positive values (shadow to the left bottom of the text):

text-shadow:#666666 -7px 10px;

Preview done with Opera 9.6:

The result:

Css3 Text Shadow

To get a more advanced effect of text shadow, the property css3 text-shadow accepts one last value to specify the blur radius.

Example of css rules with a blur of 6px:

text-shadow:#666666 4px 4px 6px;

Preview done with Opera 9.6:

The result:

Css3 Text Shadow

Finally, more shadows can be applied to the same element, separing the values with a coma.

NB: multiple shadows are at the moment supported by Opera 9.5+ and Firefox 3.1+

Example of css rules for multiple shadows:

text-shadow:#666666 4px 4px 8px, #00FDFD -2px -2px 4px;

Preview done with Opera 9.6:

The result:

Css3 Text Shadow

Note: event though the css3 property text-shadow is not actually supported by all browsers, it can be added without problems to create an extra visual effect for browser’s users that support it.
In other case, like for users of Internet Explorer, the text will be displayed with no shadows but with no other counter effects .