Blurry Text with CSS

Its pretty easy to make some blurry text with CSS. We can do it by just making the text color  transparent and adding some text shadow. Here’s the code for the same:

Blurry Text with CSS

To do it on normal text we can create a class and use SPAN tag to make the text blurry.

Example: This text will be blurry!


<span class="blur">This text will be blurry!</span>

CSS Code

    color: transparent;
    text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);

Blurry Text Links on Hover

We can make the links blurry on hover by adding the blurry styles on a:hover pseudo class.

<a class="blurry-links" href="" title="">This link text will be blurry on hover.</a>
    color: transparent;
    text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);

You can always change the RGB values and the opacity  for the text-shadow property and have the blurry text in different color.

View Demo

Mohit Aneja
I am an experienced designer and developer with a solid knowledge & experience of current web and mobile technology. I am a problem solver at heart and strive to develop the most effective solutions at the highest of standards and current technology.

  • Stay up-to-date!
    Join our mailing list to receive product updates & announcements. Every month we give away FREE Licenses to our lucky subscribers.

    No Spam Ever!

Stay up-to-date!

Get notified of product updates, new products and freebies.