Text Shadow

The text shadow property is one of those CSS techniques that has been experimental for a few of the last releases of CSS.

I'll start off by saying that I don't recommend text shadow for dark text on very light or white background colors. You can experiment with it but my experience has taught me to use it with light text on pastel or medium colored backgrounds.

When used properly it adds a nice raised almost 3 dimensional appearance to your text.

It can be used with any text element, even Wingdings.

The text-shadow property accepts the following values:
text-shadow: h-shadow v-shadow blur color;

h-shadow Required. The position of the horizontal shadow. Accepts Negative values.
v-shadow Required. The position of the vertical shadow. Accepts Negative values.
blur Optional. The blur distance
color Optional. The color of the shadow.

Examples of Text Shadow

Below we'll present a few examples. Because we use text shadow on our website we will add the values with inline style sheets.

When you start experimenting, you'll place the values in your linked style sheet.

Text shadow is optional and a matter of the taste of the author.