Text Shadows

It isn't always exciting to stick with simple text styling in your designs. Yes you can have an amazing font and stunning styling in place but there can be one thing missing from your list - text shadows.

WOW!

As the name implies text shadows, in CSS, are shadows applied to text. They can be blurry; offset horizontally or vertically; one or two on some given text and much more, as we'll discover in this chapter.

The property text-shadow allows us to apply shadows to text in CSS. Let's see how it works.

It takes four parameters to play with the position and apperance of a text's shadow. Those four parameters are:

1. Horizontal offset: specifies the distane by which the shadow should move in the horizontal axis. A positive value would mean the shadow shifting to the right and a negative value would mean the opposite.
2. Vertical offset: specifies the distane by which the shadow should move in the vertical axis. A positive value would mean the shadow shifting downwards and a negative value would mean the opposite.
3. Blurness: specifies the amount of blur to add to the shadow. 0px would mean no blur effect.
4. Color: specifies the color of the shadow.

Let's now experiment with some examples and see how these parameters work:

Set blur and color

Following we have a text shadow in its original place with 2px of blur and color orange.

p {text-shadow: 0 0 2px orange}

Note the first two parameters here - they are 0 indicating the shadow to remain in its original position.

Moving horizontally

Here we have the same text shadow as above but this time moved 5px horizontally:

p {text-shadow: 5px 0 2px orange}

And now -5px:

p {text-shadow: -5px 0 2px orange}

Moving vertically

Let's also move our text shadow vertically, first down by 5px.

p {text-shadow: 0px 5px 2px orange}

And now above by -5px:

p {text-shadow: 0 -5px 2px orange}

Multiple shadows

To add multiple shadows just add a comma between them.

p {text-shadow: 0px 5px 2px orange, 0 -5px 2px yellow}