Text effects with CSS text-shadow

Posted by
Posted in
Web Design
Share this post

Text effects with CSS text-shadow

Text effects are a great way to enhance your web designs, and with just one CSS property you can replicate effects that were only possible before by using images of text. Text-shadow is supported in all major browsers except IE, and along with RGBa colours, allows us to replicate some popular effects.

Text-shadow is easy to use and gives you a lot of control, letting you specify values for:

  • The shadows colour (RGBa is great for subtle effects).
  • The X position of the shadow, offset from the text.
  • The Y position of the shadow, offset from the text.
  • The blur radius or spread of the shadow.

And the syntax looks like this:

text-shadow: colour, x, y, radius;

For example:

text-shadow: #FFF 0px 1px 0px;

And the best part? You can have multiple shadows!

text-shadow: #FFF 0px 1px 0px, #555 0px -1px 0px;

Here are some examples for uses of text-shadow.

The obvious use

CSS text shadow

Even a simple shadow is an easy way to add depth.

text-shadow: #999 1px 2px 3px;

Inset text

CSS inset text effect

By using a sharp shadow (or two) with a tiny offset, you can give the impression of inset text.

text-shadow: #FFF 0px 1px 0px, #555 0px -1px 0px;

3D

3D text effect with CSS

Multiple shadows with incremental offsets can be used to give your text thickness.

text-shadow: #00417f 0px 1px 0px, #00417f 0px 2px 0px, #00417f 0px 3px 0px;

Blur

CSS text blur

While blurry text is hard to read, it could be used in some cases for effect.

text-shadow: #095eae 0px 0px 3px, #095eae 0px 0px 6px;

3D anaglyphic

Anaglyphic text with CSS

This one is a novelty effect, but shows just how flexible the text-shadow property is. The colour of the text needs to be set as well, and RGBa is used so the text and shadow blend where they overlap.

color: rgba(0,255,255,0.5);
text-shadow: rgba(255,0,0,0.5) -5px 0px 0px;

As you can see, text-shadow can be used in lots of interesting ways. Have you used the text-shadow property to enhance your web designs, and if so what effects did you use?

Related Post

Will you lose traffic when Google releases it’s Mobile Friendly Change on April 21?

See if you are Mobile Friendly