Code Snippet

Home » Code Snippets » CSS » Blurry Text

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

Subscribe to The Thread

  1. Santosh

    Nice effect.

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

    Reply ↓
    • 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

    nice done

    Reply ↓
  4. miaad

    hi chris
    nice effect

    Reply ↓
  5. Qazi Hamayun

    very very nice trick…. :-)

    Reply ↓
  6. andres

    Lol, simple and effective :)

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~