Blurry Text

Make the text color transparent but add a shadow:

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


More browsers support color than text-shadow though, so you might want to do feature detection. Or, leave the color property and do enough shadowing that it appears blurry anyway (demo).


  1. Santosh
    Permalink to comment#

    Nice effect.

  2. Clay

    Jeez man. This is actually genius. I can’t believe this has alluded me so many years.

    Combine this with javascript, and you can build quite a website with pseudo depth-of-field effects.

    Thanks the inspiration.

    • edward

      these kind of text are search engine friendly…..?

    • Nicklas

      @edward; Yes they are. The text is still there, just as normal. The only difference is that the color is transparent and it has a blurry shadow applied to it. Search engines have no issues reading it.

  3. sidd
    Permalink to comment#

    nice done

  4. miaad
    Permalink to comment#

    hi chris
    nice effect

  5. Qazi Hamayun
    Permalink to comment#

    very very nice trick…. :-)

  6. andres
    Permalink to comment#

    Lol, simple and effective :)

  7. lukasz
    Permalink to comment#

    Not work in <IE9

  8. Anurag
    Permalink to comment#

    Genius code :)

  9. Adnan Moin
    Permalink to comment#


  10. Ustun
    Permalink to comment#

    This doesn’t seem to work in IE10, the text completely appears transparent. As a workaround, I used the following:

    color: #cbcbcb;
    text-shadow: 0 0 5px rgba(0,0,0,1);

    Not perfect, but close.

  11. Eli

    Worked great for me. I’m using it with WebKit on iOS and Android devices.
    Thanks! :)

  12. Anubhav Saini

    text-shadow: 1px 1px 4px black, -1px -1px 4px black;
    font-size: 3em;

    makes text enough blury.

    Or colored one…

    color: black;
    2px 2px 4px #900,
    -2px -2px 2px #009,
    – 2px 2px #090,
    2px -2px 2px #ff0;


  13. srinivasan
    Permalink to comment#

    not working in IE browsers. we have any options for that :)

  14. tim geaney
    Permalink to comment#

    Is there anyway you could slowly unblur text. The text starts off blurred and then comes into focus?

    • Jay Harris
      Permalink to comment#

      Sorry this is a little late to the game Tim, but this should do what you were wanting.:

  15. Toastrackenigma
    Permalink to comment#

    Surely it would be better to just use CSS filters like so?

    .blur {

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.