Text Shadow Property in CSS3: Syntax and Examples

Text Shadow Property in CSS3: Syntax and Examples

Text Shadow CSS3 property is used to apply shadow to the text elements in HTML. You don't have to use other softwares like Photoshop to this as CSS3 has this amazing text-shadow property. Text Shadow is the most popular and important designing technique in newly created websites.

Syntax of Text Shadow CSS3 Property:

Syntax of Text Shadow property is very simple and easy to remember. You can use it within a single line of CSS3 code.

The syntax includes figures for the X-offset, the Y-offset, the blur amount and finally the colour of the actual shadow. You don’t have to settle with one shadow, you can build up multiple text-shadow values to create some really cool effects!

HTML Element {text-shadow: h-shadow v-shadow blur color;}

Example of Regular Text Shadow CSS3 Property:

p{text-shadow: 2px 2px 2px #000;}

The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow.

This css code makes a shadow to <p> which is 2px right and below of the text, which blurs for 2px and 4th argument is for the color of shadow.

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

You can use RGBA values for the color, for example, a 40% transparency of white:

p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }

Example of Multiple Text Shadow CSS3 Property:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

Browser Support for Text Shadow CSS3 Property:

Text Shadow property was introduced in CSS2 but was withdrawn from CSS2.1 specifications because of lack of support to major browsers. A stable version of Text Shadow property was introduced in CSS3 and now it is supported by all the browsers except IE8 (and earlier versions).

CSS3 Text Shadow Generator

You can visit http://css3generator.com/ to generate a variety of CSS3 text shadow (regular or multiple).