Эффект размытия текста с помощью CSS

Эффект размытия текста с помощью CSS. В этом примере для текста эффект работает таким образом: на класс .txt задаем свойство text-shadow: #fff 0 0 60px;, что дает видимость размытия текста.

На #box:hover .txt (то что мы получим при наведении) задаем значение  text-shadow: #fff 0 0 5px;, которое уменьшает эффект тени на тексте, что в свою очередь делает его менее размытым и более видимым.

HTML

<div id="box">
 <span class="txt">I</span>
 <span class="♥">♥</span>
 <span class="txt" contenteditable spellcheck="false">BLUR</span>
</div>

CSS

html { height: 100%; }

body {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
 background-color: hsl(210,50%,20%);
 background: url(bg.png), linear-gradient(90deg, hsl(210,40%,12%), hsl(210,40%,20%), hsl(210,40%,12%));
 }

.txt[contenteditable] {
 outline: none;
}

/* Box ------------------------------------------------------ */

#box {
 padding: 50px;
 font-size: 5em;
 font-weight: bold;
}

/* txt ------------------------------------------------------ */

.txt {
 color: hsla(0,0%,0%,0);
 text-shadow: #fff 0 0 60px;
 transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
 }
 @-moz-document url-prefix() { .txt { text-shadow: #fff 0 0 20px; } } /* FF fix */

#box:hover .txt {
 text-shadow: #fff 0 0 5px;
 transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1);
}

/* ♥ ------------------------------------------------------ */

.♥ {
 margin: 0 10px;
 color: hsla(0,0%,0%,0);
 text-shadow: red 0 0 5px;
 transition: text-shadow 1s cubic-bezier(0, 1, 0, 1);
 }

#box:hover .♥ {
 text-shadow: red 0 0 100px;
 transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1);
}
 @-moz-document url-prefix() { #box:hover .♥ { text-shadow: red 0 0 20px; } } /* FF fix */