Grow your CSS skills. Land your dream job.

Last updated on:

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

    • 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. very very nice trick…. :-)

  6. Permalink to comment#

    Lol, simple and effective :)

  7. Permalink to comment#

    Not work in <IE9

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".