TryIt Editor v2.0 - blurry text with CSS filter

Source Code: (back to article)

<!DOCTYPE html>
<html>
 <head>
 <title>Title of the document</title>
 <style>
 #blur {
 display: inline-block;
 padding: 20px 30px;
 margin: 20px auto;
 letter-spacing: 2px;
 background-color: #000;
 }
 #blur span:nth-child(1) {
 color: transparent;
 text-shadow: 0 0 0 #fff;
 font-size: 32px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(2) {
 color: transparent;
 text-shadow: 0 0 2px #fff;
 font-size: 35px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(3) {
 color: transparent;
 text-shadow: 0 0 2px #fff;
 font-size: 33px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(4) {
 color: transparent;
 text-shadow: 0 0 4px #fff;
 font-size: 34px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(5) {
 color: transparent;
 text-shadow: 0 0 6px #fff;
 font-size: 41px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(6) {
 color: transparent;
 text-shadow: 0 0 10px #fff;
 font-size: 40px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(7) {
 color: transparent;
 text-shadow: 0 0 8px #fff;
 font-size: 36px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(8) {
 color: transparent;
 text-shadow: 0 0 6px #fff;
 font-size: 38px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(9) {
 color: transparent;
 text-shadow: 0 0 4px #fff;
 font-size: 36px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(10) {
 color: transparent;
 text-shadow: 0 0 2px #fff;
 font-size: 34px;
 font-family: 'Carme', sans-serif;
 }
 #blur span:nth-child(11) {
 color: transparent;
 text-shadow: 0 0 0 #fff;
 font-size: 32px;
 font-family: 'Carme', sans-serif;
 }
 </style>
 </head>
 <body>
 <div id="blur">
 B
 L
 U
 R
 R
 E
 D
 T
 E
 X
 T
 </div>
 </body>
</html>