The text-shadow property adds a shadow to text without the need to embed the text in an image; in fact the text-shadow property can add multiple shadows to a text. In many ways the text-shadow property behaves same as box-shadow property we discussed earlier.

Syntax:

selector {

     text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

}

Values:

The text-shadow property expects following values:

  • Horizontal offset (h-shadow): Length specifying the horizontal offset of the shadow. A positive value moves the shadow to the right of the text, a negative one moves it to the left.
  • Vertical offset (v-shadow): Length specifying the vertical offset of the shadow. A positive value moves the shadow below the text, a negative one moves it above.
  • Blur radius (blur): An optional length specifying the shadow’s blur radius. Negative values are not allowed.
  • Shadow's color (color): An optional color of the shadow. If no color is specified, the shadow is the same color as the text.
  • none: The default value which omits any shadow showing.
  • initial, inherit

The order of the three length values is fixed, but the color value can come before or after them (although the color, as said, is optional). Here is a syntax example:

#ShadowText {

        text-shadow: 1px 1px rgba(010,010,010,0.9);

}

NOTE: Text shadows make little sense without the transparency effect. This effect in CSS3 is always achieved by using an rgba color value, where ‘a’ stands for alpha opacity and allows us to specify the transparency level of the color we used. If the value is set to ‘0’, the color will be fully transparent, while if it’s set to ‘1’ it will be fully visible (normal looking).

Outlining Text

At the time of this writing, there is no agreed way of adding a stroke to text. The CSS3 Text module proposed a text-outline property, but it was dropped. WebKit browsers, such as Safari and Chrome, support a nonstandard -webkit-text-stroke property, but there are currently no signs of it being adopted by the W3C or other browsers. However, you can fake adding an outline to text by adding a 1px shadow to all four sides like this:

#OutlineText {

     text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;

}

Using Multiple Shadows

Multiple shadows are rendered with the first one on top and each subsequent one painted behind its predecessor. So, if you want shadows to overlap, smaller ones must be listed first, as shown here:

#GlowText {

       text-shadow: 0 0 0.6em #6F9, 0 0 0.6em #6F9, 0 0 0.6em #6F9;

}

IMPORTANT! Text-shadows have to be combined with the background-color in order to produce proper results.

Example

The text-shadow property examples:

 

›› go to examples ››