从理论上来说，我们可以使用CSS的blur属性过滤器结合前面所说的使用CSS制作跨浏览器的图片模糊效果的方法来制作网页文字模糊效果。然而有一个更加简单实用和为更广泛浏览器支持的方法可以实现文字模糊效果：使用text-shadow属性。
我们首先要明确一点，在页面上使用文本模糊效果只是为了是某些效果更酷，切记不可滥用。例如可以在模态对话框中模糊一些不太重要的文字，以突出那些重要的文字。最好的做法还要为这些模糊文本添加动画过渡，在鼠标滑过时，显示清晰的文本。
我们以下面的一段文字作为演示的例子：
时间过得真快，一下就到半期考了，现在已经在开始紧张的复习了，我必须要开始努力了，因为我如果不努力，成绩就上不去，我成绩上不去就会被家长骂，我被家长骂，就会失去信心，失去信心就会读不好书，读不好书就不能毕业，不能毕业就会找不到好工作，找不到好工作就赚不了钱，赚不了钱就会没钱纳税，没钱纳税，国家就难发工资给老师，老师领不到工资就会没心情教学，没心情教学，就会影响我们祖国的未来，影响了祖国的未来，中国就难以腾飞，中华民族就会退化成野蛮的民族。中华民族成了野蛮的民族，美国就会怀疑我国有大规模杀伤性武器，我国有大规模杀伤性武器，美国就会向中国开战，第三次世界大战就会爆发，第三次世界大战爆发其中一方必定会实力不足，实力不足就会动用核武器，动用核武器就会破坏自然环境，自然环境被破坏，大气层就会破个大洞，大气层破个大洞地球温度就会上升，两极冰山就会融化，冰山融化，地球水位就会上升，地球水位上升，全人类就会被淹死。因为这关系到全人类的生命财产安全，所以我要在就剩下的几天里好好复习，考好成绩，不让悲剧发生。
我们将需要模糊的文字放入<span>元素里，然后使用text-shadow来对文字进行模糊。
span.spoiler { text-shadow: 0 0 8px #000; color: rgba(255,255,255,0); }
上面的代码使class为spoiler的<span>中的文字变得透明，只保留文字的text-shadow，从而模拟出一种文字模糊的效果。你可以通过text-shadow属性的第三个参数来调整文字模糊的效果。
添加对IE浏览器的支持
要在IE浏览器中获得相同的文字模糊效果，我们需要微软专用的blur滤镜。
span.spoiler {
text-shadow: 0 0 8px #000;
color: rgba(255,255,255,0);
filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
zoom: 1;
}
为屏幕阅读器添加暂停功能
如果用户是使用屏幕阅读器来浏览这个页面，这些文字模糊效果将不会有任何意义。文本语音阅读器将会阅读所有的文本，包括模糊的文本。我们应该在模糊的文本前添加一个暂停功能，这样可以使用户选择是否继续阅读这些被模糊的文本。我们可以使用CSS Speech Module中的pause-before属性来实现这个功能。
span.spoiler {
text-shadow: 0 0 8px #000;
color: rgba(255,255,255,0);
filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
zoom: 1;
pause-before: 3s;
}
使模糊文本变得可读
正如前面所说的，应该为模糊文本添加一个变清晰可读的功能。我们可以通过下面的代码来简单的实现它：
span.spoiler:hover { text-shadow: none; color: #000; filter: none; }
这个方法可以在所有的浏览器上起作用，包括IE5.5+。
一个可用的替代方法
还有一种可用的替代方法可以实现文字模糊的效果，那就是将文字的颜色制作文等于或接近网页背景的颜色，在鼠标滑过文字时，将背景的颜色修改为别的颜色。
span.spoiler { color: #000; background #000; }
span.spoiler:hover { background: none; }
这种方法是一种视觉欺骗，通过假象制作一种文字模糊的效果。
网上有许多文字特效的插件，如：jQuery超酷文字淡入淡出显示特效、HTML5 SVG和CSS3超酷文字遮罩动画特效，大家都可以借鉴一下它们的制作方法。
