Efectos blur con CSS

Valores extremadamente altos, fuentes enormes, bordes "excesivos"; todo es válido a la hora de intentar variantes y usar el CSS al máximo, sin temores, sin prejuicios, sin ideas preconcebidas. El resultado será incierto, espantoso, bello, dependerá de gustos y de cada caso en particular pero, probar no cuesta nada.

simurai hace eso, juega con las posibilidades y si bien algunos como Flash Light solo funcionarán en ciertos navegadores, vale la pena verlos.

Uno muy simple es I love Text Blur que simplemente muestra la forma de generar ese efecto de esfumado sobre un texto con letras de tamaño gigante utilizando la propiedad text-shadow ... sí, ya sé, es una propiedad que Internet Explorer no posee y si bien hay un filtro específico, no es lo mismo pero igual, trataremos de hacer algo que no sea exactamente igual pero no importa.

♥abc

<style type="text/css">
#blur {
color: transparent;
font-size: 240px;
font-style: normal;
font-weight: bold;
line-height: 1;
text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;
text-align:center;
/* una combinación de filtros para IE ... no, no será lo mismo */
filter: progid:DXImageTransform.Microsoft.Glow(color=#FFFFFF,Strength=15) progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
}
#blur:hover {
color: #FFF;
}
#blur:span {
color: #AA0000;
font-size: 150px;
vertical-align: super;
}
</style>

<div id="blur">
<span>&hearts;</span>abc
</div>