Generador de filtros CSS

Qué hace cada filtro, en una frase

• blur() — difumina el contenido mezclando cada píxel con sus vecinos; se mide en píxeles y es el único que crece hacia fuera del borde.
• brightness() — multiplica la luz de cada píxel: por debajo del 100 % oscurece, por encima quema los claros.
• contrast() — separa los tonos del gris medio, así que aumenta la diferencia entre luces y sombras.
• grayscale() — quita el color de forma progresiva hasta dejar solo la luminancia.
• hue-rotate() — gira todos los tonos por la rueda de color los grados que le indiques, sin tocar saturación ni brillo.
• invert() — cambia cada color por su opuesto; al 50 % toda la imagen colapsa en un gris plano.
• opacity() — hace translúcido el elemento, igual que la propiedad opacity pero encadenable con el resto.
• saturate() — sube o baja la intensidad del color; a 0 % equivale a blanco y negro, por encima de 200 % entra en territorio de póster.
• sepia() — vira la imagen a un marrón cálido de fotografía antigua.
• drop-shadow() — proyecta una sombra que sigue la silueta con transparencia del contenido, no el rectángulo de su caja.

El orden de la cadena no es decorativo

filter no es una lista de ajustes independientes: es una cadena de revelado. Cada función recibe la imagen que dejó la anterior, así que cambiar el orden cambia el resultado. grayscale(100%) hue-rotate(90deg) no hace absolutamente nada con el giro de tono, porque ya no queda color que girar; al revés, hue-rotate(90deg) grayscale(100%) sí produce un gris distinto, porque cada tono aporta una luminancia diferente.

Este generador escribe siempre la cadena en el mismo orden, y está elegido para que cada paso tenga sentido sobre el anterior: primero el revelado tonal (brightness, contrast), después el color (saturate, hue-rotate), luego las conversiones que se comen el color (grayscale, sepia, invert), a continuación la óptica (blur y el drop-shadow, que así se calcula sobre la silueta ya procesada) y al final opacity, para que atenúe el conjunto incluida la sombra. Si copias la cadena y reordenas a mano, cuenta con que el resultado se moverá.

Otro detalle que ahorra disgustos: aquí solo entra en el código lo que está fuera de su valor neutro. brightness(100%) o blur(0px) no aportan nada y sí obligan al navegador a montar la tubería de filtrado, además de ensuciar la hoja de estilos.

El desenfoque es el filtro caro

La mayoría de los filtros son baratos: brightness, contrast, saturate o grayscale calculan cada píxel por su cuenta y la tarjeta gráfica los resuelve casi gratis. blur y drop-shadow son otra historia, porque cada píxel necesita leer a sus vecinos. El coste sube con el área de la superficie y con el radio, y se dispara si además hay una animación por medio.

Tres formas de mitigarlo, de la más útil a la más agresiva. Primero, reduce la superficie: desenfoca una imagen de 400 px, no un fondo a pantalla completa. Segundo, aísla el elemento en su propia capa con will-change: filter o transform: translateZ(0), para que el navegador no vuelva a pintar media página en cada fotograma; ponlo solo en el elemento que se anima y quítalo cuando termine, porque cada capa consume memoria de vídeo. Y tercero, si el desenfoque es fijo y no cambia nunca, hornéalo en la imagen antes de subirla: un PNG ya desenfocado cuesta cero en tiempo de ejecución.

backdrop-filter, el pariente del efecto cristal

filter afecta al elemento y a su contenido. backdrop-filter hace lo mismo pero con lo que hay detrás, dejando intacto lo de dentro. Es exactamente lo que necesitas para el efecto cristal: un panel con un fondo semitransparente y backdrop-filter: blur(12px) desenfoca la página que queda debajo mientras el texto de encima sigue nítido. Acepta las mismas funciones que filter, con la misma regla de orden y el mismo coste de rendimiento, así que conviene reservarlo para cabeceras fijas y tarjetas pequeñas.

Si vas por ese camino, cuida el contraste del texto que va encima: sobre un fondo desenfocado el ratio real depende de la foto que haya debajo. Compruébalo con colores en vivo, y si quieres entender por qué 4.5:1 es la cifra que importa, está explicado en la guía de teoría del color. El resto de generadores de la categoría están en código web.

Preguntas frecuentes

¿Los filtros CSS afectan al rendimiento de la página?

Sí, y no todos igual. brightness, contrast, saturate, grayscale o sepia se resuelven muy rápido en la tarjeta gráfica porque cada píxel se calcula por su cuenta. blur y drop-shadow son los caros: obligan al navegador a mirar los píxeles vecinos, y el coste crece con el área de la superficie y con el radio. En una miniatura no lo notarás; en un fondo a pantalla completa que además se anima, sí.

¿Por qué cambia el resultado si cambio el orden de los filtros?

Porque cada función recibe la imagen que dejó la anterior, como una cadena de revelado. grayscale(100%) seguido de hue-rotate no hace nada, porque ya no queda color que girar, mientras que al revés el gris final sí cambia. Con blur y drop-shadow pasa lo mismo: la sombra se calcula sobre la silueta que le llega, así que desenfocar antes o después da resultados distintos.

¿Cuál es la diferencia entre filter y backdrop-filter?

filter afecta al elemento y a todo su contenido. backdrop-filter afecta solo a lo que hay detrás del elemento y deja intacto lo que hay dentro. Es la propiedad del efecto cristal: un panel con fondo semitransparente y backdrop-filter: blur() desenfoca la página que queda debajo y mantiene nítido el texto encima. Necesita que el fondo del elemento sea al menos parcialmente transparente.

¿Se pueden animar los filtros CSS?

Sí, filter es una propiedad animable y transiciona bien entre valores del mismo tipo. La condición es que los dos estados tengan las mismas funciones y en el mismo orden: de blur(0px) a blur(8px) interpola de forma suave, pero pasar de none a una cadena de tres funciones produce un salto seco. Por eso conviene escribir el estado de reposo con los valores neutros en vez de usar none.