Grow your CSS skills. Land your dream job.

Fun With Blurred Text

Published by Chris Coyier

Making text blurry is pretty easy. Just make the color transparent and set a text-shadow.

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

That's dangerous though, because there are browsers that support color but not text shadow, so the end result would be totally invisible text. Of course, the solution is to feature detect and only apply this effect if you are in a browser that supports it:

.textshadow .blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

The color of the shadow is the only thing visible, so make sure it has enough contrast enough to be seen.

See the Pen Fun with Blurred Text by Chris Coyier (@chriscoyier) on CodePen.

Thems the basics. Now let's do some fun stuff.

By The Letter

Using Lettering.js, we can inject spans into a word. So..

<h2>Smokemonster</h2>

becomes

<h2>
  <span>S</span>
  <span>m</span>
  <span>o</span>
  <!-- you get the idea -->
</h2>

Now instead of of having to apply the shadow on the entire word, we can do it letter-by-letter. Let's make the blur zoom across the text like a crazy Eko-killing smoke monster.

First we'll make a keyframe animation1 which animates from solid to blurry. For the sake of demo, this we're using the -webkit- prefix, but you should use all the prefixes.

@-webkit-keyframes blackblur {
  from { text-shadow: 0 0 72px black; color: transparent; }
  to   { text-shadow: 0;              color: black;       }
}

Now we can call that animation on every single letter. The further the letter along in the word2, the longer the delay before it starts.

.smokemonster span:nth-of-type(1)  { -webkit-animation: blackblur 2s       1 alternate; }
.smokemonster span:nth-of-type(2)  { -webkit-animation: blackblur 2s 0.1s  1 alternate; }
.smokemonster span:nth-of-type(3)  { -webkit-animation: blackblur 2s 0.15s 1 alternate; }
.smokemonster span:nth-of-type(4)  { -webkit-animation: blackblur 2s 0.2s  1 alternate; }
.smokemonster span:nth-of-type(5)  { -webkit-animation: blackblur 2s 0.25s 1 alternate; }
.smokemonster span:nth-of-type(6)  { -webkit-animation: blackblur 2s 0.3s  1 alternate; }
.smokemonster span:nth-of-type(7)  { -webkit-animation: blackblur 2s 0.35s 1 alternate; }
.smokemonster span:nth-of-type(8)  { -webkit-animation: blackblur 2s 0.4s  1 alternate; }
.smokemonster span:nth-of-type(9)  { -webkit-animation: blackblur 2s 0.45s 1 alternate; }
.smokemonster span:nth-of-type(10) { -webkit-animation: blackblur 2s 0.5s  1 alternate; }
.smokemonster span:nth-of-type(11) { -webkit-animation: blackblur 2s 0.55s 1 alternate; }
.smokemonster span:nth-of-type(12) { -webkit-animation: blackblur 2s 0.6s  1 alternate; }

Now that's awfully repetitive, but hey, that's the deal with CSS sometimes. It's not really a programming language...

Getting Programatic

Let's say we had an unknown number of letters we wanted to deal with individually. Or we wanted to programmatically decide what color to use for the shadow. Or we wanted to randomly choose the blur level. CSS isn't suited for any of these things, we'll want to use JavaScript instead. As usual around here, I'm going to lean on jQuery.

jQuery can SET a text shadow like this:

$(".blur").css({
  'text-shadow': '2px 2px 5px green'
});

Luckily, text-shadow doesn't come with a bunch of vendor prefixes to deal with. But still, we're a little little hamstrung here. What if we just want to set the offset, blur, or color? There isn't specific CSS properties for those things. We'd have to repeat the whole string with repetitive values to make a change. Not the end of the world, but what's worse, we can't animate!

That's where the jquery-cssHooks project comes in. It extends jQuery to be able to handle individual parts of complex CSS properties like text-shadow, box-shadow, border-image, transform, etc.

Once we load up the scripts we need (order is important)...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/color.js"></script>
<script src="js/textshadow.js"></script>

...we now have the ability to get/set/animate individual parts of the text-shadow.

$(".blur").css({
  'textShadowColor': 'red'
});

$(".blur").animate({
  'textShadowBlur': 50
});

Fancy!

Let's get our random on and animate random letters to random blur values with random color saturation.

var text = $("#some-word"),
    // assuming lettering() has already been called on it
    numLetters = text.find("span").length; // how many letters?

function randomBlurize() {

  text
    // pick random letter
    .find("span:nth-child(" + (Math.floor(Math.random()*numLetters)+1) + ")")
    .animate({
      'textShadowBlur': Math.floor(Math.random()*25)+4,
      'textShadowColor': 'rgba(0,100,0,' + (Math.floor(Math.random()*200)+55) + ')'
    });

// Call itself recurssively
setTimeout(randomBlurize, 100);

} // Call once
randomBlurize();

Funny how much easier animating text-shadow is in CSS. But doing it this way is cool too as it has all those programatic advantages.

View Demo   Download Files   Play on CodePen


1 While keyframe animations are WebKit only right now, rumor has it they might make Firefox 5. Update July 2012: keyframe animations are in all major browsers now and need the prefixes: -webkit-, -moz, -ms-, and -o-.

2 Notice we are using :nth-of-type here. I generally find that way more useful than :nth-child. Especially in this case where we wouldn't want other tags screwing up the flow.

Comments

  1. Enrique Moreno Tent
    Permalink to comment#

    Such an intelligent idea! I never thought of that! Fantastic tip! :)

  2. Nifty.

  3. Thats a great idea, your ideas are superb Chris

  4. That was a great article! It’s a cool idea, I was thinking about experimenting with this when I saw the Doctype.tv episode about text shadows.

    But whenever I try to do animations I still work with jQuery because support for CSS3 animations is to crappy.

    – Rick

  5. wouldn’t work in IE 6,7,8 don’t know about 9 or later

    • Steven Braun
      Permalink to comment#

      Just think of how it looks on a screen reader! (shudders)

    • What’s the problem with screen readers? It’s text, it will read it. Although I don’t use them so I really don’t know. Would the spans cause problems? They can’t possibly care about shadows.

  6. cool, that’s an interesting effect and easier than I had imagined. Wish this stuff would work with firefox already.

  7. Permalink to comment#

    Love the demos.

  8. siggi
    Permalink to comment#

    instead transparent for the text, using opacity 0.1 or 0.05 and the same color as the text-shadow my give a css-only fallback without hacks.

    -IEs don’t support text-shadow, neither opacity – the fallback isn’t pretty, but still readable.
    -older Operas or FFs work with opacity, but the text-shadow blur radius may not work as desired.

  9. Yup, thats right. The Aurora build of Firefox has animations and keyframes using the -moz prefix. you can get it here http://www.mozilla.com/en-US/firefox/channel/ or just read about it here http://dbaron.org/log/20110419-animations

  10. Permalink to comment#

    i loved that!

  11. Axel
    Permalink to comment#

    Love the Fringe reference also!

  12. +1 for the Fringe reference. John Noble, FTW!

    Maybe something like this for your next trick!

  13. whoa, what have you done, another wonderful trick, good start for the day!! Thanks!

  14. Permalink to comment#

    Simply awesome tip Chris.

  15. Great css trick.. love this tutorial.

  16. Permalink to comment#

    test test
    test test

  17. jon
    Permalink to comment#

    Now, if we can write it conditionally only for Mac, so my boss will think he’s nuts when everyone says it looks just fine to them…
    :-)

  18. Yes, Yes, and YESSSS!!!!! This is awesome stuff! You can be so creative with these types of things, the possiblitees are endless.

  19. Permalink to comment#

    Great idea as always. Thanks for sharing!

  20. I love this, it’s a neat little design that’s both amusing and interesting. Thanks for the tutorial!

  21. Wow! Very nice! I actually just got done messing around with Lettering.js with a new project I’m working on. I used it to manipulate the logo. http://www.thebowandthebeautiful.com

  22. When I saw the first example that was all blur I was thinking, “Why would anyone want to do that?” but the latter examples have a really cool look! Anyways, thanks for the tip!

  23. Interesting ideea, I like it.

    Thanks for the tip!

  24. Permalink to comment#

    Again, more useless stuff. Why waste all of your time with this drivel for it to work on a couple of select hipster browsers when you can create blurred text in 3 seconds in photoshop and it works in all browsers?

    This is a nice css3 circle jerk.

    • Yes, you will get better browser support with images.

      But let’s say you wanted to use it as the title for an article (unlikely, but it could be done tastefully, let’s say a ghost stories for kids blog) and that blog had 100 articles. Making 100 images for each title is not practical. Using CSS is faster to use, uses less resources (faster), and faster to update.

      And in a few years when browser support is way better, who will be more comfortable working with these techniques?

  25. What a cool idea never thought of anything like that before, wish most browser could handle CSS3 by now.

    Thanks:)

  26. sebastien paquet

    I didnt know browsers could have anything to do with hipsters. technology is for hipsters.ah ah ! progress is useless like css (sarcasm here!)

  27. This is really amazing, thank you for the demo. And Neal you need to go fuck yourself, the demos are obviously for demonstrative purposes displaying the power of css. These techniques could be used for many practical aesthetics purposes. Stop trolling asshole!

  28. Veeresh

    Hi Chris,

    Its not work in IE 6,7,8 don’t know about 9 or later.
    please do something so that it works in ie also

    thanks in advance

  29. Permalink to comment#

    hey Chris, how can I control how extreme the blur gets in your animating random letters example. I want to make it more subtle so it’s still readable.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".