Cómo funciona filter
La propiedad filter aplica efectos gráficos a un elemento cuando el navegador lo pinta: el archivo de la
imagen no cambia. Se pueden encadenar varias funciones separadas por espacios, y el orden importa:
cada una se aplica sobre el resultado de la anterior. Esta herramienta las escribe siempre en el mismo orden.
grayscale(),sepia()einvert()van de 0 % (sin efecto) a 100 %.brightness(),contrast()ysaturate()parten de 100 %: por debajo reducen y por encima aumentan.hue-rotate()gira todos los colores en la rueda cromática, en grados.blur()desenfoca, en píxeles.drop-shadow()dibuja una sombra que sigue la silueta, también la de un PNG transparente.
Usos habituales
- Logotipos de clientes en gris que recuperan el color al pasar el ratón: marca la opción del hover.
- Texto sobre una foto: bajar el brillo (
brightness(60%)) hace legible el texto blanco sin editar la imagen. - Fondos desenfocados detrás de un modal o una tarjeta. Para desenfocar lo que hay detrás de un elemento, la propiedad es
backdrop-filter. - Estados desactivados:
grayscale(100%) opacity(50%)en un producto agotado.
Filtros en el servidor con /random
Las fotos aleatorias de ximg.es admiten dos filtros en la propia URL, que se aplican al generar la imagen:
?grayscale para blanco y negro y ?blur=1…10 para desenfocar. La diferencia con CSS es que la
imagen ya llega filtrada, así que no hay coste al pintar y funciona en sitios donde no controlas el CSS, como un correo:
<img src="https://ximg.es/random/800x600?seed=portada&grayscale&blur=3" alt="">Más opciones de las imágenes en el generador.
Rendimiento
Los filtros de color son baratos. blur() y drop-shadow() con radios grandes cuestan más,
sobre todo animados o en muchos elementos a la vez. Si un filtro es fijo y la imagen es tuya, a veces compensa
aplicarlo al exportar.