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);
}

Blurry

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).

Comments

  1. User Avatar
    Santosh
    Permalink to comment#

    Nice effect.

  2. User Avatar
    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.

    • User Avatar
      edward

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

    • User Avatar
      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. User Avatar
    sidd
    Permalink to comment#

    nice done

  4. User Avatar
    miaad
    Permalink to comment#

    hi chris
    nice effect

  5. User Avatar
    Qazi Hamayun
    Permalink to comment#

    very very nice trick…. :-)

  6. User Avatar
    andres
    Permalink to comment#

    Lol, simple and effective :)

  7. User Avatar
    lukasz
    Permalink to comment#

    Not work in <IE9

  8. User Avatar
    Anurag
    Permalink to comment#

    Genius code :)

  9. User Avatar
    Adnan Moin
    Permalink to comment#

    Nice

  10. User Avatar
    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. User Avatar
    Eli

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

  12. User Avatar
    Anubhav Saini

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

    makes text enough blury.
    fiddle

    Or colored one…

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

    post

  13. User Avatar
    srinivasan
    Permalink to comment#

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

  14. User Avatar
    tim geaney
    Permalink to comment#

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

    • User Avatar
      Jay Harris
      Permalink to comment#

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

  15. User Avatar
    Toastrackenigma
    Permalink to comment#

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

    .blur {
        -webkit-filter:blur(2px);
        -moz-filter:blur(2px);
        -o-filter:blur(2px);
        filter:blur(2px);
    }
    
    • User Avatar
      lucas
      Permalink to comment#

      CSS filters are barely supported

    • User Avatar
      XCanG
      Permalink to comment#

      For today it support very good and this is only way to make blurred images or other html tags, than text.

  16. User Avatar
    Ajay
    Permalink to comment#

    Nice Trick :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag