Shadow for Text Characters

Text characters can have shadow like images, divs, and other HTML elements can have shadows.

Like Borders for Text Characters, shadow is specified with CSS. No JavaScript required.

The shadow's position, thickness, and color all can be customized.

We'll do a few examples. Following the examples is a text character shadow tool you can use to see the effect of certain CSS declarations you wish to try.

For consistency (and for contrast), all the example text is blue (#0000ff) and the shadow is a pale red (#ffcccc).

Here is the first example.

The horizontal shift is 2 pixels right. And the vertical shift is 5 pixels down.

Here is another example.

The only difference between this and the first example is a blur radius of 3 pixels.

This third example has the shadow slightly to the left and far up.

The horizontal shift is 4 pixels left. And the vertical shift is 20 pixels up.

And one more example, after which we'll to the "how to do it" part.

The only difference between this and the third example is a blur radius of 5 pixels.

There is a lot of room for creativity. Shadow position, shadow color, and the blur radius can all be changed to get the effect you're looking for.

How to Do It

The CSS text-shadow property is used. The value for the property is up to four parts, the first two being required and the last two being optional:

text-shadow: h-shadow v-shadow blur-radius color

Here is what the values mean.

• h-shadow (required) — the amount of horizontal shift the shadow shall have. The amount may be 0 (zero). A negative number shifts the shadow to the left. A positive number to the right.

• v-shadow (required) — the amount of vertical shift the shadow shall have. The amount may be 0 (zero). A negative number shifts the shadow up. A positive number down.

• blur-radius (optional) — the amount of blur to effect on the shadow. Default is 0 (zero).

• color (optional) — the color for the shadow. Default is the color of the text the shadow applies to.

(See Using CSS Snippets for information about implementing the CSS snippets on this page.)

The generator for text shadow (below) includes links generate the CSS used to build the above four examples.

A Tool to Generate the CSS for Character Shadow

A tool was created to design shadow for text characters and generate the CSS to implement the design.

Use the tool to specify your preferences. It will show you the result and give you the code for the CSS definitions.

Within the tool area, the box above the form is a preview. The box below the form contains the CSS style.

Being able to shadow text characters with custom colors, positions, and blurs brings wonderful design possibilities. Besides, as declared in Borders for Text Characters, it is just plain fun.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager