CSS Text Shadow

If you are a frequent visitor to the site, you may have noticed a couple of subtle changes to my blog the last couple of days. I’ve added text shadows on the titles and I also removed the text underline from the links. Today, this article will focus on how to add text shadows to your blog using CSS.

CSS Text Shadows give coders and web developers a tool to create text effects such as 3 dimensional effects, glowing effects and stencils. Text Shadows was originally proposed in CSS2, but really took off with CSS3.

Text Shadows is supported in most major browsers: Firefox, Safari, Chrome, Opera. The one major browser that’s missing in the list is Microsoft’s Internet Explorer. Text shadows is possible in Internet Explorer using JQuery. See link below.

Adding Text Shadows to your website, blog or page is quite easy. All it takes is adding a line of code to your existing CSS file. Consider the title above called “CSS Text Shadow” styled using <h2>. To make a text shadow, just add the following to your CSS file.

h2 { text-shadow: 2px 2px 2px #aaa; }

Text Shadows

The text shadow element contains 4 attributes. The first attribute is the x-coordinate. The second is y-coordinate. The third is the blur. The fourth is the color of the shadow. Negative values can be placed to simulate a light source that’s coming from the bottom.

h2 { text-shadow: 2px 3px 3px #aaa; }

Text Shadows

Here’s a couple of excellent articles about CSS text shadows:

CSS text shadows is a great tool for creating cool effects on your site. Just one advice. Don’t overdue it. Use it sparingly.