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 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;


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

Small tweaks win over major website redesigns

Read now

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>