How to Create Glowing Links in CSS3

In my previous CSS3 article, we created blurred text using a shadow and a transparent text color. Today, we’ll use a similar technique to create animated glowing links.

Text-shadow is a versatile CSS3 property which is supported in all browsers without vendor prefixes. Except one. Sorry IE9 users — you’ll need to wait a few more months for IE10. It’s not just useful for shadows, though. On a darker background, a white “shadow” appears to make the text glow:

CSS3 Glowing Text

This can be applied when the user hovers/focuses over a link. With a little CSS3 transition magic, we can create an animated glowing effect. Let’s write some code. Starting with our HTML, we’ll apply a “glow” class to a link:


<a href="#" class="glow">Glowing Link</a>

Our first CSS3 declaration defines the initial state and the vendor-prefixed transition properties. The transition starts immediately and lasts for half a second. I found “linear” timing produced the most natural effect, but you can experiment with others (ease, ease-in, ease-out, ease-in-out, cubic-bezier):


a.glow, a.glow:hover, a.glow:focus
{
	text-decoration: none;
	color: #aaf;
	text-shadow: none;
	-webkit-transition: 500ms linear 0s;
	-moz-transition: 500ms linear 0s;
	-o-transition: 500ms linear 0s;
	transition: 500ms linear 0s;
	outline: 0 none;
}

We can now define the glowing text properties. I found that a single text-shadow such as 0 0 8px #fff was a little too subtle. Two shadows produced a better result — one white and one bright yellow at slightly different offsets:


a.glow:hover, a.glow:focus
{
	color: #fff;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

View the glowing links demonstration page. The source contains all the code and I recommend you experiment with different animation and text-shadow properties.

warning: More blurry behavior in Opera

This animated effect works well in Firefox, Chrome and Safari. IE9 doesn’t support text-shadow so the effect can’t be seen. Opera supports CSS3 transitions but it only affects certain properties. Color works well, but it’s not applied to text shadows — which results in more abrupt animation. This should be fixed in a future version.

The second set of links on the demonstration page shows a back-lit effect created by changing the text color to the same as the background. However, this makes the text invisible on IE9 and below. To solve the problem, we can either use Modernizr or write our own text-shadow detection code, e.g.


if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}

Have fun with the technique. Please leave your comments and a URL if you create a nice effect on your site.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Hira Kumar Maharjan

    it is really great article . It helps in my comming pojects

  • http://www.facebook.com/profile.php?id=668397983 Kristen Holden

    Thanks Craig. Awesome article!

  • Avk

    Nice, really great how CSS3 transitions being used these days. NIce effect.

  • http://twitter.com/Tatsh Tatsh

    Could use filters in IE but there would be no transition. I would disagree anyway as filters really make things worse overall because they just aren’t really part of the engine so much. You would think even today’s hardware and with DX rendering on hardware in part filters would be a good idea, but they cause all sorts of layout issues in my experience.

    IE users can continually get the lesser experience and that’s fine with me, mainly because Microsoft fails to support their own ecosystem with a good browser.

  • http://twitter.com/alamoz Adrien Lamothe

    Nice technique, it adds a lot to appearance. Hyperlinks are difficult to style, I tried writing some code to detect IE and provide alternate CSS styling, then decided to simply not support IE even though the pages won’t render at all on IE. Why cater to an inferior browser?

  • http://twitter.com/alamoz Adrien Lamothe

    Nice technique, enhances appearance. Hyperlinks are difficult to work with, I tried detecting IE and providing an alternate styling but then decided to simply not support IE even though the pages won’t render with IE. Why cater to an inferior browser?

  • http://HornsbyWaterManagement Katie Clarke

    Hi Craig,

    Thanks very much for the info. I would like to try this out with my website I must admit that I have been a bit lazy in looking up info material, but this has caught my attention and revitalised my interest.

    Thanks again.

    Katie