Unfocused Text with CSS

  • follow us in feedly
Published May 18, 2013 by Brad Knutson
Unfocused Text with CSS

CSS allows us to accomplish a lot of cool effects that once required Javascript or Flash. Text effects are especially popular today. Text-shadows, typography, skewing, the list goes on and on.

Recently, I was asked about blurry, or unfocused text with CSS. CSS3 doesn’t provide an attribute to blur or unfocus text, but there is a simple way to accomplish this.

In order to reproduce an unfocused effect without any pre-existing CSS attribute, we have to first think about what blurred text looks like. Text in HTML is scalable and vector based, in other words it’s always crisp and sharp, the opposite of what we want to accomplish. What does mirror the effect of blurred or unfocused text is the text-shadow.

Expanding on that idea, let’s make the text color transparent and instead only show the text shadow.

Unfocused Text

CSS

.unfocused-text {
    color: transparent;
    text-shadow: 0px 0px 5px rgb(0,0,0);
}

Pretty simple right? There isn’t much to it. You can define how blurry you want the text to appear by changing the spread of the text-shadow – I used 5px in my example above.

We can expand this idea even further. What about unfocusing text on hover?

Unfocused text (hover over me)

CSS

.unfocused-text-hover {
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    -ms-transition: all ease 0.2s;
    transition: all ease 0.2s;
}
.unfocused-text-hover:hover {
    color: transparent;
    text-shadow: 0px 0px 5px rgb(0,0,0);
}

What about CSS animations? We can use keyframes to build animations an any way we’d like. I’ve come up with a couple of examples below.

Unfocused Text

CSS

.blurry-text {
    font-size: 32px;
    color: transparent;
    -webkit-animation: blurry 5s infinite; /* Safari 4+ */
    -moz-animation:    blurry 5s infinite; /* Fx 5+ */
    -o-animation:      blurry 5s infinite; /* Opera 12+ */
    animation:         blurry 5s infinite; /* IE 10+ */
}
@-webkit-keyframes blurry {
	0%   { text-shadow: 0px 0px 0px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 20px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 0px rgb(0,0,0); }
}
@-moz-keyframes blurry {
	0%   { text-shadow: 0px 0px 0px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 20px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 0px rgb(0,0,0); }
}
@-o-keyframes blurry {
	0%   { text-shadow: 0px 0px 0px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 20px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 0px rgb(0,0,0); }
}
@keyframes blurry {
	0%   { text-shadow: 0px 0px 0px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 20px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 0px rgb(0,0,0); }
}

Unfocused Text

CSS

.blur-text {
    color: transparent;
    -webkit-animation: blur 5s infinite; /* Safari 4+ */
    -moz-animation:    blur 5s infinite; /* Fx 5+ */
    -o-animation:      blur 5s infinite; /* Opera 12+ */
    animation:         blur 5s infinite; /* IE 10+ */
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
@-webkit-keyframes blur {
	0%   { text-shadow: 0px 0px 200px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 0px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 200px rgb(0,0,0); }
}
@-moz-keyframes blur {
	0%   { text-shadow: 0px 0px 200px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 0px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 200px rgb(0,0,0); }
}
@-o-keyframes blur {
	0%   { text-shadow: 0px 0px 200px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 0px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 200px rgb(0,0,0); }
}
@keyframes blur {
	0%   { text-shadow: 0px 0px 200px rgb(0,0,0); }
	50% { text-shadow: 0px 0px 0px rgb(0,0,0); }
	100% { text-shadow: 0px 0px 200px rgb(0,0,0); }
}
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">