• Tweet

The text-shadow is not new property in CSS3, infact it was introduced in CSS 2, however the browsers have implemented it recently. As the name refers, the text-shadow property allows to create text shadow. Following is the syntax of the text-shadow.

Syntax

In the above syntax, the first positive value represents the x-axis (horizontal) distance to the right of text. In case of negative value, the distance is to the left of the text.
Similarly, the second positive value represents y-axis (vertical) distance below the text. The negative value creates distance above the text.
The third optional value is for the blur representing radius of blur. If no blur value is specified, there will not be blur in shadow.

Decorating text with text-shadow

With CSS property text-shadow we can make some cool text effects which were earlier possible by photoshop etc. Following are some examples to give an idea how we can use the text-shadow to decorate the text.

1. Simple Shadow

This is example of simple use of text shadow property. It creates 2px shadow to x-axis, y-axis and blur of 2px radius.

color:#7690CF;
text-shadow:2px 2px 2px #48577D;

2. Engraved Style Text

Only vertical distance is specified with no blur.

color: #666;
text-shadow: 0px 3px 0px #666;

3. Glowing text effect

Glowing effect can be added by specifying only blur radius as following:

color:#FAF4E8;
text-shadow:0 0 20px #FFE30A;

4. Blur text

The example below is similar to the above, i.e. only blur radius is specified with no horizontal or vertical distance. However in this example, we have used color value transparent, which specifies that the background color should be transparent. This gives the blur effect.

color: transparent;
text-shadow: 0 0 10px #333;

5. Using Multiple Shadows

We can specify multiple text shadows separated by a comma. The multiple shadows are applied from front to back, ie. the first shadow is on top. An example of multiple text-shadow is given below.

color:#F2B405;
text-shadow: 0 0 4px #F24405,
0 -5px 4px #F27405,
2px -10px 6px #F29F05,
-2px -15px 11px #F2E205,
2px -18px 18px #222601;

6. Emboss text

In the example below, we use two shadows. In the first shadow, the horizontal and vertical values are negative, and in the second shadow these are set to be positive to create emboss text effect.

color:#ccc;
text-shadow: -1px -1px #FFF,
1px 1px #333;

7. Border Around the text

The following code creates the border effect.

color:#7FCAEB;
text-shadow: 0 -1px #00468C,
1px 0 #00468C,
0 1px #00468C,
-1px 0 #00468C;

8. 3D Style Text

The 3D style text effect can be created by using multiple shadows. Each shadow is just slightly increased in using the same color.

color:#F2B405;
text-shadow: 2px 2px #F27405,
3px 3px #F27405,
4px 4px #F27405,
5px 5px #F27405

Tested with:

Safari 5

FF 3.6

Opera 11

Chrome 8

IE 9

If you have any questions, please feel free to leave a comment.