The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text. Just like drop-shadow from Photoshop styles. Using this css property we can create a glow effect for our texts.

Some examples

This text should have a text-shadow.

This text, too, should have a text-shadow.

Syntax for text-shadow

p.test{
    text-shadow: #6374AB 20px -12px 2px;
}

So text-shadow accepts 4 values (3 for position and 1 for color):

1. The color of the text-shadow (#6374AB)
2. The X-coordinate of the text-shadow (20px), relative to the text
3. The Y-coordinate of the text-shadow (-12px), relative to the text
4. The blur radius of the text-shadow (2px), which means the amount of space the shadowtext is ‘stretched’, causing a blur effect. 0 means: no blur. Don’t set this value too high, the shadowtext quickly becomes illegible.

Browser compatibility

At this point text-shadow only works within:

• Firefox 3 and above
• Opera 9.5 and above
• Safari 1.3 and above (partial)
• Chrome all versions

How to create the glow effect

Knowing all this now we can create a glow effect for our texts to give the some nice eye-catching experience for the user. The best example here is to use this effect on anchor links on hover (A:hover).

Looking at the example above we can see the effect of the text-shadow glow effect on the left side and on the right is the normal setting. This can be pretty neat to use on anchor links. So in order to get this effect we can declare in our CSS code the following properties:

A{
    color: #FFCC66;
    font-weight: bold;
    text-decoration: none;
}

A:hover{
    text-decoration: underline;
    color: #FFF;
    text-shadow: #EEE 0 0 10px;
}

So for all anchors we have a default color and no decoration styles. Now using the a:hover property we can add our glow effect using a lighter color and just the blur radius set to 10 pixels, so the shadow will be “centered” and blurred out from our text creating the glow effect.

Conclusion and resources

Quite simple and easy right? This could be a nice effect in your design process. It’s one of those things the are completing your “wow” effect when designing a new website. Very easy to use with just a few lines of code text-shadow can make the difference for your anchor styles. For more information about text-shadow you can find here:

quirksmode.org/css/textshadow

css3.info/preview/text-shadow

reference.sitepoint.com/css/text-shadow