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

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

    Nice

  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.
    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. srinivasan
    Permalink to comment#

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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