Blurry Text with CSS

Making blurry text with CSS transition property

<!-- html -->
<h1>This text is blurry</h1>

<!-- css -->
h1 {
color: transparent;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
font-size: 40px;
  -webkit-transition: text-shadow 1.9 ease-out; 
     -moz-transition: text-shadow 1.9 ease-out; 
      -ms-transition: text-shadow 1.9 ease-out; 
       -o-transition: text-shadow 1.9 ease-out; 
          transition: text-shadow 1.9 ease-out;
}

h1:hover {
text-shadow: 0 0 0 rgba(0, 0, 0, 1);
-webkit-transition: text-shadow 0.5s; 
   -moz-transition: text-shadow 0.5s; 
    -ms-transition: text-shadow 0.5s; 
     -o-transition: text-shadow 0.5s; 
        transition: text-shadow 0.5s;
cursor: default;
}

Demo:

This text is blurred