CSS: Filtros

Los filtros de CSS permiten aplicar efectos gráficos sobre una imagen con el fin de modificar su apariencia, tal y como se haría en una aplicación de retoque fotográfico. Con la propiedad filter se puede desenfocar la imagen, invertir los colores, poner una foto en escala de grises o modificar su brillo y contraste.

Hay que tener en cuenta que los navegadores web más importantes tienen soporte para la mayoría de formatos de imagen, pero solo Firefox permite aplicar efectos gráficos a imágenes en formato SVG.

Los valores de la propiedad filter se indican con funciones a las que se introduce parámetros. Su sintaxis es una palabra clave seguida de un paréntesis, dentro del cual se introduce los valores necesarios.

Funciones de la propiedad filter:

Desenfocar imagen

El filtro blur() es una función que permite aplicar un efecto de desenfoque gaussiano. Admite un parámetro que es el radio especificado en unidades de longitud, ya sea relativa o absoluta. Por lo tanto, se puede indicar con píxeles, puntos, milímetros, centímetros, pulgadas, em, rem, ex, ch… Pero no admite porcentajes. Con el valor 0 se deja el filtro sin ningún efecto.

Código CSS:

.blur {
  filter: blur(2px);
}

Resultado:

Ajustar el brillo

El filtro brightness() permite ajustar el brillo de una imagen. Se trata de una función que aplica un multiplicador lineal, provocando que la imagen sea más brillante o más oscura. Su parámetro es un número o un porcentaje. El valor de interpolación es 1, por lo que el valor 0 deja la imagen totalmente oscura, mientras que el valor 2 aplica el doble de brillo.

Código CSS:

.brightness {
  filter: brightness(0.3);
}

Resultado:

Ajustar el contraste

El filtro contrast() permite ajustar el contraste de una imagen. Al igual que ocurre con el filtro del brillo, admite un parámetro numérico o porcentual que aplica un multiplicador lineal. El valor de interpolación también es 1, por lo que valores superiores a 1 añaden contraste y valores inferiores lo reducen.

Código CSS:

.contrast {
  filter: contrast(0.5);
}

Resultado:

Añadir sombras

El filtro drop-shadow() es una función que permite aplicar sombras como si estuviéramos usando la propiedad CSS box-shadow, pero en lugar de crear una sombra rectangular a la caja del elemento HTML, lo que hace es añadir la sombra al contorno de la figura de la misma imagen, en su canal alfa.

Esta función admite cuatro parámetros: desplazamiento horizontal, desplazamiento vertical, desenfoque y color. Los tres primeros son indicados con unidades de longitud, mientras que el color se puede indicar con un nombre predefinido, con código hexadecimal o mediante los modelos de color RGB y HSL.

Código CSS:

.drop-shadow {
  filter: drop-shadow(2px 2px 2px #ff7f2a);
}

Resultado:

Escala de grises

El filtro grayscale() permite convertir una imagen a escala de grises aplicando un multiplicador lineal. Esta función admite un parámetro numérico o porcentual, cuyo valor de interpolación es 0, que deja el filtro sin efecto. El valor 1 (equivalente al 100%) convierte la imagen a escala de grises de forma completa.

Código CSS:

.grayscale {
  filter: grayscale(0.7);
}

Resultado:

Rotar el tono

El filtro hue-rotate() permite rotar el tono del color de una imagen. Esta función admite un parámetro que es el ángulo de rotación, por lo que se puede especificar en grados (deg), grados centesimales (grad), radianes (rad) y vueltas (turn). El valor de interpolación es 0. No tiene valores mínimos ni máximos, y se evalúa en un módulo de 360; por tanto, 180deg equivale a 540deg.

Código CSS:

.hue-rotate {
  filter: hue-rotate(90deg);
}

Resultado:

Invertir los colores

El filtro invert() permite invertir los colores de una imagen. Esta función también aplica un multiplicador lineal, admitiendo un parámetro que puede ser numérico o porcentual. En este caso, el valor de interpolación que deja el filtro sin efecto es 0, por lo que 1 invierte los colores de la imagen al 100%.

Código CSS:

.invert {
  filter: invert(1);
}

Resultado:

Añadir transparencia

El filtro opacity() permite ajustar el nivel de transparencia de una imagen. Esta función es similar a la propiedad CSS opacity, pero con una diferencia: los filtros ofrecen mejor rendimiento —aceleración por hardware— en algunos navegadores web. También admite un parámetro numérico o porcentual, y el valor inicial o de interpolación es 1 (100%), dejando el filtro sin efecto.

Código CSS:

.opacity {
  filter: opacity(0.25);
}

Resultado:

Ajustar la saturación

El filtro saturate() permite ajustar el nivel de saturación de una imagen. Esta función aplica un multiplicador lineal especificado como valor numérico o porcentual. Su valor de interpolación es 1. Con valores inferiores a 1 se reduce la saturación, y usando valores superiores a 1 se incrementa.

Código CSS:

.saturate {
  filter: saturate(3);
}

Resultado:

Convertir a color sepia

El filtro sepia() convierte una imagen a color sepia, es decir, como si se tratara de una imagen antigua. Esta función admite un único parámetro indicado en valor numérico o porcentual. Aplica un multiplicador lineal, siendo 0 su valor de interpolación (sin efecto), por lo que el 1 será en color sepia al 100%.

Código CSS:

.sepia {
  filter: sepia(0.85);
}

Resultado:

Combinar filtros

Los filtros se pueden combinar para aplicar varios de ellos a la vez a una misma imagen. Se aplican en el orden declarado. Por ejemplo, si se quiere mejorar el contraste y el brillo de una imagen, se usará la siguiente sintaxis:

Código CSS:

.combinar {
  filter: contrast(0.5) brightness(1.25)
}

Resultado: