How to Create Blurred Text Effects in CSS3

Contributing Editor

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;
}

CSS3 Blurred Text

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";
}
warning: Opera’s blurry behavior

Chrome and Firefox show blurred text and it’s disabled in IE. However, Opera can be quirky; it supports text-shadow but doesn’t like applying it to transparent text. This appears to be a bug since applying a color of rgba(0,0,0,0) solves the problem.

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.

    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.

    • IT Mitică

      Nice one!

      For Opera, I believe this will cut it:

      color: rgba(0, 0, 0, 0.010);

      • http://www.optimalworks.net/ Craig Buckler

        You’re right – that’s a great solution for Opera. I’ve updated the post and demonstration accordingly. Thanks.

        • IT Mitică

          No problem.

          Thank you for the article.

    • A

      funny technique, but horrible in terms of readabilty. i believe it’s even worse for people with visual impairments. so it’s nice to play with, but i will never use it on a real site, esp. in navigation.

      • http://www.optimalworks.net/ Craig Buckler

        A 4px blur was at the limit of legibility with the text size I used in the demonstration. You can reduce the blur or enlarge the text to avoid those issues.

    • IT Mitică

      From my further testing in Opera (somebody may prove me wrong, though) it even works if I replace:

      color: transparent;

      with

      color: rgba(0, 0, 0, 0.000);

      or

      color: rgba(255, 255, 255, 0.000)

      or any other rgba color, as long as the alpha channel is zero.

      • http://www.optimalworks.net/ Craig Buckler

        That worked for me – the demonstration now uses rgba(0,0,0,0). Who knows why that’s different to ‘transparent’?

        • IT Mitică

          It may be that Opera resolves

          color: transparent;

          by doing something like

          display: none;

          instead

          while transparency is resolved using the alpha channel.

    • IT Mitică

      For IE, a combo of:

      filter:progid:DXImageTransform.Microsoft.Shadow(color=’#333399′, Direction=135, Strength=2);

      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=’1′, MakeShadow=’false’, ShadowOpacity=’1.00′);

      or something like that, will cut it?

    • SyafzMagz

      thanks…I am still new with css-3…
      hope to learn more from this educational site… :)