Skip to main content

How to Create Glowing Links in CSS3

By Craig Buckler

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.