Normally, to get a text shadow effect onto a website, we’d look to use one of our favorite image altering design programs. Now, we don’t need to look further. The power of CSS3 provides us with some great looking text-shadow effect. Here’s an example of what it looks like:
Text-Shadow Sample

Pretty cool right? This is accomplished with very little CSS, and can really add some pizazz to your site when used properly. Here’s how the text-shadow property is used in your CSS file:

Super simple right?
As you can see, the text-shadow property takes four values:

  • First, the color that you would like the text-shadow to be.
  • Next up is the x-coordinate of where you’d like the shadow to be relative to the text. Remember that the x-axis is horizontal, and the property moves from the center to the right. Therefore, our text-shadow will be offset 2px to the right of our initial text.
  • Logically, the next value is the y-coordinate of where you’d like the text-shadow to be, once again relative to the initial text. The y-axis is vertical, and positive numbers will move the text down.
  • The last value is the amount of blur, in pixels, that you’d like to add to the text-shadow. You can think of this as how many pixels you’d like to “stretch” the shadow text. Keep this value low, because if you set it too high, you’ll see that the text can quickly become illegible.

With CSS3, adding special typography effects is a breeze, and with the right usage can really make the text on your website stand out. Be smart about the placement of text-shadow, and try to keep it away from extremely important text on your webpage such as full stories and articles. The text-shadow is better left for better looking headers or titles.

That’s all for text-shadows; a super easy, fast, and good looking effect. Until next time!

Download Source Files