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

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```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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