Create Simple Text Blur With CSS3

Hover on the text below - works on latest Chrome, Safari, Firefox, IE 10, etc, but not on IE 9 and below.

TESTING BLUR

CSS
Put the CSS codes below inside <style> ... </style> tag. It can be placed inside the head or the body of the HTML.

#blur
{

/*text properties*/
text-align:center;
font-size:60px;
font-family:Impact;

/*color of the text*/
color:transparent;

/*text-shadow*/
text-shadow:0px 2px 15px #ababab;

/*hover transition timing*/
-moz-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;

}

#blur:hover
{

/*text color on hover*/
color:#000;

/*text shadow on hover*/
text-shadow:0px 0px 30px #ababab;

/*mouse cursor shape on hover state*/
cursor:pointer;

}

HTML (updated)
Put this anywhere you want the text to appear on your webpage.

<center>
<table><tr><td>

<div id="blur">TESTING BLUR</div>

</td></tr></table>
</center>

I put table wrapping the div tag to limit the area of hovering.

Text shadow CSS property

General syntax :
text-shadow : (x-position) (y-position) (blur-amount) (hex-color);

Example :
text-shadow : 20px 30px 5px #0F0AFE;

To put multiple shadows with different positions, just use comma(s) to separate the shadows. For example, putting 3 different shadows for a single text.

text-shadow :
(x1-position) (y1-position) (blur-amount1) (shadow-color1),
(x2-position) (y2-position) (blur-amount2) (shadow-color2), 
(x3-position) (y3-position) (blur-amount3) (shadow-color3);

---

Further reading, blur with complex animation, using jQuery and JavaScript, on CSS tricks

---

For fun

FOR FUN