{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS text-shadow Property Tutorial

CSS allows you to create text shadows using the text-shadow property, similar to ones that you can create with image editors such as Photoshop and Gimp.

The text below is an example of a text with a text shadow applied to it with the use of the text-shadow property.

text shadow

Web Browser Support for the text-shadow Property
text-shadow Property Syntax

Multiple Text Shadows
Text Shadow Demos and Codes

Web Browser Support for the text-shadow Property

This text should have a text shadow when it is viewed in the following web browsers: Firefox, Chrome, Opera and Safari.

Internet Explorer does not support the text-shadow property.

text-shadow Property Syntax

The syntax for the text-shadow property is shown below.

selector { text-shadow:[value(x-coordinate offset)] [value(y-coordinate offset)] [value(shadow blurriness)] [value(color)]; }

The first values specifies the x-coordinate offset (left or right).

The second value specifies the y-coordinate offset (top or bottom).

The third value is optional, it does not have to be specified. If it is specified, it specifies the level of blurriness of the text shadow. If it is not specified, it is as if the level of bluriness is set to zero.

The fourth value specifies the color of the text shadow.

As an example, the text-shadow property and the values that are used to create example below are shown below the example.

text shadow

.text { text-shadow:6px 2px 3px red; }

The first value specifies a positive x-coordinate offset of 6 pixels. The second value specifies a positive y-coordinate offset of 2 pixels. The third value specifies the level of blurriness of the text shadow at 3 pixels. The fourth value specifes that the color red will be the color of the text shadow.

Multiple Shadows

You can also have more than one text shadow per text.

A demo of a text with multiple text shadows is shown below. The code for the text shadows is shown below the demo.

multiple text shadows

Text Shadow Demos and Codes

The code for the text shadow demos are shown below the demo itself.

simple drop shadow

selector { color:black; text-shadow:4px 4px 3px grey; }

simple drop shadow with no blur

selector { color:black; text-shadow:4px 4px 0 grey; }

this text has an outline

selector { color:grey; text-shadow:1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black, 1px -1px 0 black; }

this text glows

selector { color:black; text-shadow:1px 1px 2px grey, -1px -1px 2px grey, -1px 1px 2px grey, 1px -1px 2px grey; }

The text below is not text. It is a text shadow with no blur.

selector { height:70px; font-size:28px; color:black; text-shadow:0 35px 0 black; }

this text has a fading text shadow

selector { color:black; text-shadow:2px 5px 5px red, 5px 9px 3px orange, 7px 10px 2px yellow; }

Home

Tutorials

Templates

Free Website Templates

References

CSS References