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="//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.
Such an intelligent idea! I never thought of that! Fantastic tip! :)
Nifty.
Thats a great idea, your ideas are superb Chris
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
Hi! This is great.. I used it with an anchor, the blur sharpening on hover with a slow transition, and it looks so cool!
( -webkit-transition: color 1500ms ease;
-moz-transition: color 1500ms ease;
-o-transition: color 1500ms ease)
Check it out!
http://www.insitedesignlab.com/blur/
hmm, only webkit transition seems to work, but still cool in Chrome
wouldn’t work in IE 6,7,8 don’t know about 9 or later
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.
cool, that’s an interesting effect and easier than I had imagined. Wish this stuff would work with firefox already.
Love the demos.
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.
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
i loved that!
Love the Fringe reference also!
+1 for the Fringe reference. John Noble, FTW!
Maybe something like this for your next trick!
whoa, what have you done, another wonderful trick, good start for the day!! Thanks!
Simply awesome tip Chris.
Great css trick.. love this tutorial.
test test
test test
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…
:-)
Yes, Yes, and YESSSS!!!!! This is awesome stuff! You can be so creative with these types of things, the possiblitees are endless.
O yes and BTW, another reason to just drop ie for all this awesome stuff: http://pixelr3ap3r.com/firefox-vs-ie-a-css3-comparison/
Great idea as always. Thanks for sharing!
I love this, it’s a neat little design that’s both amusing and interesting. Thanks for the tutorial!
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
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!
Interesting ideea, I like it.
Thanks for the tip!
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?
What a cool idea never thought of anything like that before, wish most browser could handle CSS3 by now.
Thanks:)
I didnt know browsers could have anything to do with hipsters. technology is for hipsters.ah ah ! progress is useless like css (sarcasm here!)
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!
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
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.