How to Create Blurred Text Effects in CSS3

Here’s a great text effect I first saw demonstrated on Chris Coyier’s CSS Tricks website. Blurred text can be created in CSS3 by applying a transparent text color and a text shadow:

.blur-text
{
	color: transparent;
	text-shadow: 0 0 5px #000;
}

Unfortunately, not all browsers support text-shadow. IE9 and below apply the transparent color but no shadow effect — the text becomes invisible. We must either resort to Modernizr or roll our own text-shadow detection code.

When the browser supports it, the following JavaScript code will append a “textshadow” class to the HTML element. We can therefore use a CSS selector of “.textshadow .blur-text” to ensure it’s only applied when the effect won’t cause undesirable behavior:

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

Blurred Links

With a little additional CSS3 magic we can make links smoothly blur in or out on hover or focus. It could be a pleasing effect for a navigation menu.

We’ll define a “blur” class (or “blur in” classes) which can be applied to any link. The link will start blurred and return to normal focus on when it’s active. Similarly, we’ll define “blur out” classes which blurs the text on hover/focus, i.e.

<a href="#" class="blur in">starts blurred, ends un-blurred</a>
<a href="#" class="blur out">starts un-blurred, ends blurred</a>

We now require basic CSS styles which are applied in all browsers — even those without text-shadow support:

a.blur
{
	text-decoration: none;
	color: #339;
}

a.blur:hover, a.blur:focus
{
	text-decoration: underline;
	color: #933;
}

The next set of styles is applied to all .blur elements whether they have focus or not:

• we remove the link underline and outline
• set the text color to transparent, and
• apply a CSS3 transition which smoothly animates between no and full text-shadow. The effect starts after 100ms and completes 400ms after that.

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
	text-decoration: none;
	color: rgba(0,0,0,0);
	outline: 0 none;
	-webkit-transition: 400ms ease 100ms;
	-moz-transition: 400ms ease 100ms;
	transition: 400ms ease 100ms;
}

Finally, we define our two text-shadow states. The third text-shadow property defines the ‘amount’ of blur. It’ll animate between 0 and 4px but this can be modified if you want more or less blurring:

/* no blur */
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
	text-shadow: 0 0 0 #339;
}

/* full blur */
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
	text-shadow: 0 0 4px #339;
}

View the link blur demonstration page — the source contains all required CSS and JavaScript.

I hope you find it useful, but be wary of accessibility/visibility issues when using this effect. I’d be grateful for your comments and please post a URL if you use it elsewhere.