Here are some cool and easy to implement text shadow effect that I have been using a lot recently. They don’t take much but they do add a lot more depth and detail to your text.

Here is some black text on a grey background with a 1 pixel white text shadow.

That one is subtle but looks great. All it takes is this little bit of CSS.

text-shadow: #fff 0 1px 0;

The text-shadow style accepts four different values:

  • The color (hex code)
  • The x-coordinate relative to the text (pixels)
  • The y-coordinate relative to the text (pixels)
  • The blur radius (pixels)

For the code above, I have set the color to white (#fff) with no x-coordinate value, a 1 pixel y-coordinate value and no blur radius. So my white text-shadow appears as a white stroke 1 pixel below my text, giving it a bit of depth.

You can also use a similar style to create a letterpress effect.

LETTERPRESS

This effect uses the following CSS:

text-shadow: #777 0 2px 3px;

We could even take it a step further and add a second text-shadow.

LETTERPRESS

The text-shadow style also accepts multiple settings, separated by a comma.

The above CSS looks like this:

text-shadow: -1px -1px 2px #333, #777 0 2px 3px;

The difference is subtle but very effective.

Here are some examples of other text shadows:

Regular dark shadow on red text.

text-shadow: #444 1px 1px 1px;
A lot of blur on white text.

text-shadow: #000 0 0 20px;
Block shadow

text-shadow: #222 1px 1px 0

As it stands, the text-shadow style does not work in current releases of IE, though it is suppose to work in IE 9.