Con solo CSS podemos crear efectos sobre nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp; como explicamos en un artículo anterior Filtros en CSS3.
Cuando empecé a jugar con el desenfoque en CSS, todavía teníamos que pelear con Internet Explorer 5.5 (sí, así de atrás llegan algunos traumas). Por entonces usábamos el famoso DXImageTransform para lograr un simple blur que hoy resolvemos con una línea de CSS. Y aunque hoy el panorama es mucho más amable, sigue habiendo trucos, matices y compatibilidades a tener en cuenta.
En esta guía te enseño todas las formas modernas y antiguas de aplicar blur, cuándo usar cada método, cómo evitar que el texto quede borroso, cómo mejorar la legibilidad y cómo sacarle partido al efecto glassmorphism sin afectar el rendimiento.
En éste artículo veremos un filtro en especifico blur; este filtro; como su nombre indica; permite realizar un desenfoque o difuminado a nuestros elementos HTML -Imágenes, texto, contenedores, entre otros-; en este artículo veremos alguno de sus posibles usos de este particular filtro.
¿Qué es el efecto blur en CSS y para qué sirve?
El efecto blur aplica un desenfoque gaussiano a un elemento o al área detrás de él. Se usa muchísimo para:
- Crear tarjetas tipo “cristal esmerilado” (glassmorphism).
- Desenfocar fondos para destacar texto.
- Generar jerarquía visual en modales y overlays.
- Hacer transiciones suaves o interfaces más limpias.
A diferencia del viejo enfoque basado en Photoshop, hoy podemos conseguirlo directamente desde CSS con filter: blur() o backdrop-filter: blur(). Cuando lo probé por primera vez me sorprendió lo simple que era comparado con las acrobacias que hacíamos para soportar IE.
¿Cómo funciona el filtro blur?
Este método aplica el blur al propio elemento. Es perfecto para imágenes, fondos o secciones completas que quieras difuminar tal cual.
Recordando su funcionamiento; el filtro consiste en emplear la propiedad dada generalmente en pixeles para aplicar un desenfoque en nuestro elemento:
.elemento {
filter: blur(6px);
}Por supuesto, existen muchos otros filtros, a saber :grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, y invert; pero; en este artículo el filtro de interés es el blur.
Comencemos con los ejemplos…
Difuminando nuestras imágenes con el filtro blur
El más obvio de todos, consiste en aplicarle un desenfoque o difuminado a nuestras imágenes:
img {
filter: blur(6px);
}
Otro posible uso podría ser activar el desenfoque al pasar el cursor por encima de la imagen en cuestión; y esto lo logramos utilizando el selector :hover.
img:hover {
filter: blur(6px);
}
Resaltando ciertos elementos con el efecto blur
Este tercer ejemplo es un poco más interesante; les mostraremos como crear un simple efecto blur sobre cajas de texto (tag div con algún contenido) las cuales llamaremos 'ítems'; básicamente los ítems serán escalados y se les aplicará el filtro de desenfoque ya visto en los ejemplos anteriores; además usaremos transiciones para 'suavizar' el pasar de un estado a otro y un código jQuery para aplicarle la respectiva clase de desenfoque (blur) a ciertos ítems.
La idea en general es posicionarse sobre una ítem (hover), entonces este ítem se escalará a un tamaño mayor; a la par, desenfocaremos todos las demás ítems no seleccionados y los escalaremos a un tamaño menor; con esto dará la sensación de que el ítem se superpone sobre los demás elementos y ayudaremos al usuario a centrarse en el ítem ya seleccionado.
Este es el resultado final:
Realidad Aumentada con Vuforia
Vuforia es un SDK que permite construir aplicaciones basadas en la Realidad Aumentada.
Múltiples bordes en un contenedor
Múltiples fondos animados con CSS
El elemento Progress Bar HTML5
El elemento Progress Bar HTML5
Cambiando el Build Target de Android
Para cambiar el Build Target de Android de versión en Eclipse solo necesitamos hacer dos cosas.
¡Empecemos!
Cuerpo del documento (El HTML)
Un HTML tradicional; tenemos un tag main o principal; dentro de este tag, tendremos nuestros ítems o cajas de texto con algún contenido interesante.
<main class="content">
<article class="item">
<a href="">
<h6>Título</h6>
<p>Texto.</p>
</a>
</article>
<article class="item">
<!-- Mas articulos -->
</article>
</main>El estilo (El CSS)
Con esto, crearemos un contenedor de nos mas de 500px de ancho y centrado; además agregaremos un poco más de estilo, para mantener una presentación; este código es opcional, pero recomendable ya que favorece el efecto final.
.content{
max-width:500px;
width:80%;
height:auto;
padding:20px;
background:#CCC;
margin: 0 auto;
}Obliga al contenedor a tomar la altura de su contenido; es decir los ítems que están dentro de él; para eso nos valemos de un pequeño truco, que es colocar un contenido (nulo -""-) antes y después del tag main.
.content:before,
.content:after {
content: "";
display: block;
clear: both;
} Cajas de texto (Ítems)
Siguiendo con el CSS, llegamos a una de las partes interesantes del ejemplo; crearemos cajas flotantes o ítems posicionados a la izquierda, con una leve separación entre cada ítem; lo verdaderamente importante de este CSS son las transiciones con tres propiedades: sombra, escalado y el filtro blur respectivamente.
article.item{
padding:5px;
background:#FFF;
width:150px;
height:220px;
margin:0 5px 5px 0;
float: left;
box-shadow: 1px 1px 10px rgba(0,0,0,0.4);
transition:box-shadow 2s, transform 500ms, filter 500ms ease-in-out;
}Pero; ¿cuando se aplican esta transiciones?; las dos primeras (sombra y escalado) se aplicarán al posicionarnos sobre algún ítem de interés; es decir; cuando el ítem obtenga el evento hover.
article.item:hover{
transform: scale(1.05);
box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
} La última transición pero no menos importante, se aplicará cuando los ítems NO seleccionados por el usuario (no hover) se les agregue la clase blur mediante JavaScript; además de que en esta clase también se aplicará un escalado, pero esta vez para reducirles un poco el tamaño.
article.blur{
filter: blur(3px);
transform: scale(0.95);
}Los demás estilos son de fácil compresión y por lo tanto obviamos su explicación; ahora, el JavaScript.
El JavaScript
// *** jQuery
var item = $(".item");
// agrego la clase blur a todos los 'ítem' que NO sea al que le se le esta aplicando el evento 'hover'
item.hover(function() {
item.not($(this)).addClass('blur');
// al perder el foco, retiro la clase a todos los 'item'
}, function() {
item.removeClass('blur');
});
// *** JavaScript
// 1. Selecciona todos los elementos con la clase "item"
const items = document.querySelectorAll(".item");
const className = 'blur'; // Definimos el nombre de la clase para evitar errores tipográficos
// 2. Itera sobre cada elemento para agregar los escuchadores de eventos
items.forEach(currentItem => {
// FUNCIÓN DE ENTRADA (hover IN / mouseover)
currentItem.addEventListener('mouseover', function() {
// Itera sobre todos los ítems de nuevo
items.forEach(item => {
// Comprueba si el ítem actual de la iteración NO es el ítem sobre el que está el cursor
if (item !== currentItem) {
// Agrega la clase 'blur' a todos los ítems que no son el actual
item.classList.add(className);
}
});
});
// FUNCIÓN DE SALIDA (hover OUT / mouseout)
currentItem.addEventListener('mouseout', function() {
// Itera sobre todos los ítems y elimina la clase 'blur' de todos
items.forEach(item => {
item.classList.remove(className);
});
});
});Sí, ese es todo el JavaScript que necesitaremos (¡mientras menos mejor!); este código se basa en dos etapas explicadas a continuación:
Al obtener el foco, el ítem seleccionado por el usuario, se disparará este evento, el cual agrega la clase blur a todos los ítem que no sea el que selecciono el usuario; para eso usamos la función
not().item.not($(this)).addClass('blur');Al perder el foco, removemos la clase blur.
item.removeClass('blur');
Con solo agregar y remover la clase blur sobre los elementos de nuestro interés se ejecutará la transiciones ya explicadas en la sección de CSS; dando como resultado una interesante transición.
Cuándo usar este método
- Cuando quieres desenfocar un elemento específico.
- Si no necesitas afectar el fondo detrás del elemento.
- Si buscas la mejor compatibilidad disponible.
Es el método más robusto y, si vienes del mundo antiguo como yo, te recordará aquellos tiempos donde poner filter: blur(3px) era un sueño imposible en IE.
¿Cómo agregar el efecto Blur en imágenes en múltiples navegadores?
Sin embargo resulta interesante y necesario saber cómo utilizar esta Técnica de Procesamiento Digital de Imágenes en múltiples navegadores incluyendo al infame Internet Explorer.
Como casi siempre en el Desarrollo Web; Internet Explorer es un caso particular, DX filter es empleada desde Internet Explorer 5.5, dejándolo de lado en conjunto con muchas otras convenciones propietarias y utilizando CSS3 como alternativa a partir de Interner Explorer 9.
Lamentablemente Internet Explorer no posee un buen soporte de CSS3 así que resulta verdaderamente molesto lograr un simple filtro como este el Internet Explorar; si se deseara llevar el efecto Blur a las versiones modernas tuviéramos que emplear alguna API JavaScript que realice el trabajo o emplear en Canvas.
El archivo SVG para Firefox
Por último en el código CSS anterior, incluimos un archivo SVG; pero, ¿Qué son estos archivos?
Los SVG los podemos definir cómo (tomando un estrato de la Documentación oficial de Firefox): "Gráficos Vectoriales Escalables (SVG por sus siglas en ingles) es un lenguaje de marcado XML para describir gráficos vectoriales en dos dimensiones. Básicamente, es a los gráficos lo qué XHTML es al texto. SVG ha sido expresamente diseñado para trabajar conjuntamente con otros estándares del W3C tales como CSS, DOM y SMIL."
Algunas versiones de Firefox no incorporan el uso de los filtros inclusive empleando el prefijo -moz; por lo tanto definimos un SVG para hacer el trabajo:
filter: url(blur.svg#blur);El cuerpo del archivo:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg> Esta técnica sigue funcionando hoy como alternativa avanzada.
Alternativas modernas (JS + Canvas)
Cuando el blur debe ser dinámico o muy pesado:
- Canvas 2D
- Librerías como StackBlur
- Procesamiento previo de imágenes
Es más flexible, pero menos ligero que el blur nativo del navegador.
Blur aplicado al fondo con backdrop-filter
El método estrella para hacer diseños tipo glassmorphism. A diferencia de filter, este método desenfoca lo que está detrás del elemento.
.card {
backdrop-filter: blur(10px);
background-color: rgba(255,255,255,0.2);
}Efecto glassmorphism
El truco del vidrio esmerilado se basa en:
- blur de 5–20px
- fondo semitransparente
- borde suave o blanco muy claro
Cuando descubrí esto, me di cuenta de que por fin podíamos dejar de usar PNGs simulando vidrio… y por supuesto, de hackear IE con SVG como hacía hace años.
Ventajas y limitaciones
Ventajas
- No toca el contenido del elemento.
- Ideal para modales, overlays y cajas superpuestas.
- Produce efectos estéticos modernos sin imágenes extra.
Limitaciones
- No funciona en Internet Explorer.
- En Safari antiguo requiere -webkit-backdrop-filter.
- Puede afectar el rendimiento con muchos píxeles de blur.
Ejemplos prácticos listos para copiar y pegar
Tarjeta borrosa para resaltar texto:
.wrap {
padding: 2rem 3rem;
color: #fff;
border: 3px solid #fff;
backdrop-filter: blur(10px);
}Código completo:
<div class="imagen"></div>
<div class="texto">
Ejemplo de blur en CSS
<p>Aplicando el desenfoque directamente a la imagen.</p>
</div>
.imagen {
background-image: url('https://picsum.photos/id/16/1200/300');
height: 500px;
background-size: cover;
filter: blur(5px);
}Este patrón coincide con lo que describías en tu ejemplo original, solo que ahora funciona sin prefijos raros.
Blur en tarjetas:
.card {
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(12px);
background-color: rgba(255,255,255,0.15);
}Blur sobre imágenes de fondo:
.hero {
background-image: url('foto.jpg');
background-size: cover;
filter: blur(6px);
}Blur en modales o popups:
.modal-bg {
backdrop-filter: blur(8px) brightness(60%);
}Buenas prácticas para un blur que no afecte la legibilidad
Elegir la intensidad adecuada
- 2–6px: blur suave para fondos claros.
- 8–12px: glassmorphism estándar.
- 15–30px: difuminados fuertes para modales.
Combinar blur con colores semitransparentes
El truco:
background-color: rgba(255,255,255,0.2);Sin esto, el texto suele perder contraste.
Rendimiento
El blur es costoso: usa cuidado en dispositivos móviles y listas largas.
Evita aplicarlo a contenedores muy grandes salvo que sea indispensable.
Compatibilidad y soporte en Navegadores: El CSS para el efecto Blur
En IE en caso de que aun lo uses, puedes emplear filter:progid:
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}Son utilizados los prefijos de los navegadores web más utilizados:
- -webkit para Google Chrome y Safari.
- -moz para Mozilla Firefox.
- -o para Opera.
- -ms para Internet Explorer.
Aunque YA NO SON NECESARIOS USARLOS:
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
}También es empleado el filter para versiones viejas de Internet Explorer.
Legacy: Soporte para versiones antiguas de Internet Explorer
Por si te interesa aun desarrollar para Internet Explorer:
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');Errores comunes al aplicar blur en CSS
- Blur que afecta al texto
- Sucede cuando el blur se aplica con filter al contenedor entero.
- Solución: aplicar backdrop-filter a un hijo superpuesto.
- Filtros que no funcionan en Firefox
- En versiones antiguas necesitabas un SVG.
- Hoy solo problemas si usas combinaciones exóticas.
- Problemas con backdrop-filter
- Si el fondo no es semitransparente, no verás nada:
- Siempre usa rgba() o opacity.
FAQs sobre blur en CSS
- ¿Cuál es la diferencia entre filter: blur() y backdrop-filter: blur()?
- Filter desenfoca el elemento. Backdrop-filter desenfoca lo que hay detrás.
- ¿Cómo hacer blur compatible con Internet Explorer?
- Usando DX filters o SVG. En mi caso, durante años tuve que mezclar ambos métodos según versión.
- ¿Afecta al rendimiento?
- Sí, especialmente con valores altos y contenedores grandes.
- ¿Puedo combinar blur con otros filtros?
- Sí: grayscale, brightness, saturate, opacity, drop-shadow…
- ¿Cómo evitar que el texto quede borroso?
- Aplicando el blur en un elemento separado y usando fondo semitransparente.
Conclusiones
Y eso es todo; de este último ejemplo podemos crear otros tipos de elementos para nuestra web; por ejemplo podemos emplearlo para crear un menú principal, o una galería de imágenes; es cuestión de adaptarlo a las necesidades que tengamos.
Acepto recibir anuncios de interes sobre este Blog.
Con solo CSS podemos crear efectos sobre nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp; en esta entrada veremos el uso básico del filtro blur o desenfoque y también veremos un ejemplo más completo para el listad