Nice CSS text shadow effects

Learn to create CSS text shadowIn this post we’ll play around with some of the text-shadow possibilities in CSS.

Generally speaking text-shadow can be used to make some of the same nice text effects that you normally would use graphical programs to create. But with the benefits of having content as plain text instead of embedded in graphic images.

Why CSS text shadow

Nice text effects are normally created as graphical images. However producing and maintaining these images can be qiute time consuming if you aren’t a Photoshop Ninja, the graphics increase page weight in kb, and the text can’t be indexed by search engines.

This is the reasons why it’s worth spending a little time looking at the possibilities with CSS, since the CSS text is easy to maintain, don’t increase page weight, and can be indexed by the search engines.

The text-shadow possibilities

The CSS text shadow effects are created by defining the position of the shadow in relation to the text and blur radius in the following way:

  • <color>
  • <offset-x>
  • <offset-y>
  • <blur-radius>

As you will see in some of the following examples, a text can have multiple shadows. The shadow first defined in the CSS will be displayed first.

Here are some examples on what effects you can create with CSS shadows:

See examples on the text shadow effects you can create with CSS

The following CSS code has been used to create the effects:

<STYLE TYPE="text/css">
/* .s1 style displays a basic and solid text shadow */
.s1 {font-size:30px; font-weight:bold; text-shadow: 0.1em 0.1em #ccc}

/* .s2 style displays a text shadow slightly fuzzy */
.s2 {font-size:30px; font-weight:bold; text-shadow: 0.1em 0.1em 0.05em #333}

/* .s3 style displays a text shadow fuzzy */
.s3 {font-size:30px; font-weight:bold; text-shadow: 0.1em 0.1em 0.2em black}

/* .s4 style displays a white text with slightly fuzzy shadow */
.s4 {font-size:30px; color: #ffffff; font-weight:bold; text-shadow: 0.1em 0.1em 0.2em black}

/* .s5 style displays a buttonized text */
.s5 {font-size:30px; color: #cccccc; font-weight:bold; text-shadow: -1px -1px white, 1px 1px #333}

/* .s6 style displays a text with a inner shadow effect */
.s6 {font-size:30px; color: #cccccc; font-weight:bold; text-shadow: 1px 1px white, -1px -1px #444}
</style>

See a example here

Conclusion

The visual quality of the CSS shadows are surprisingly good. You get plenty of flexibility in the actual styling, and with the SEO and maintenance benefits –  I’m really recommending that you play a little around with the possibilities.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

5 Replies to Nice CSS text shadow effects

  1. thanks for this have been looking for an inner shadow solution for ages! seems css3 is very new still

  2. Tatiana says:

    It work for font-weight: bold, but when font-weight is normal it’s look like three layers.

  3. Zap Media says:

    Just what we were looking for, to be used on a client website. Inner Shadow using CSS Text Shadow – thanks for sharing.

Trackbacks for this post

  1. Tweets that mention Nice CSS text shadow effects | Tips4PHP -- Topsy.com
  2. Adding text stroke effect with CSS | Tips4PHP

Comments are now closed for this article.