Filtros CSS

Aplicación de filtros para modificaciones visuales


Los filtros CSS son una característica muy atractiva de CSS que permite aplicar ciertos efectos de imagen, propios de aplicaciones de retoque fotográfico, como sepia, variaciones de brillo o contraste (u otros) al vuelo en el propio navegador, sin hacer cambios permanentes sobre una imagen.

Dichos filtros funcionan a través de la propiedad filter, a la cuál hay que especificarle una función concreta de las existentes, como por ejemplo la función de blanco y negro (grayscale):

img {
  filter: grayscale(100%);
  transition: filter 1s;
  width: 200px;
}

img:hover {
  filter: grayscale(0%);
}
<p>Mueve el ratón sobre la imagen:</p>

<img src="manzdev-goose.png" alt="ManzDev Goose">

Este código muestra visualmente las imágenes de la página en escala de grises (al 75%, no completamente). Tenemos más filtros a nuestra disposición, no sólo el de escala de grises, y los veremos a continuación.

Nota: Aunque esta propiedad se ha utilizado en el ejemplo sobre una imagen, no tiene que ser necesariamente así, es decir, funciona con otros elementos HTML.

Funciones de filtros

Los filtros de CSS nos proporcionan un amplio abanico de funciones, listas para utilizar mediante la propiedad filter y aplicarlas a los elementos que queramos de nuestra página. Estos filtros permiten alterar los colores, tonalidades o diferentes aspectos visuales, tal como se harían desde un programa de diseño gráfico:

Función Significado Valor Mínimo Máximo >100%
grayscale Escala de blanco y negro | 0% (sin cambios) 100% = Grayscale = 100%
blur Desenfoque Gausiano 0px (sin cambios)
sepia Grado de color sepia | 0% (sin cambios) 100% = sepia = 100%
saturate Grado de saturación | 0% = desaturado 100% (sin cambios)
opacity Grado de transparencia | 0% = invisible 100% (sin cambios) = 100%
brightness Brillo | 0% = negro 100% (sin cambios)
contrast Contraste | 0% = gris 100% (sin cambios)
hue-rotate Rotación de color (matiz) 0deg (sin cambios)
invert Invertir | 0% (sin cambios) 100% = invertido = 100%
drop-shadow Sombra idéntica (Ver apartado función drop-shadow())

En negrita el considerado valor por defecto.

Porcentajes o numéros

Observa que las funciones de filtros grayscale(), sepia(), saturate(), opacity(), brightness(), contrast() e invert() toman un ó un como valor, esto ocurre porque es posible proporcionar dicho valor de dos formas diferentes:

  • Como valor porcentual: 0%, 50%, 100%, 150%...
  • Como valor numérico: 0, 0.5, 1, 1.5...

Así pues, indicar filter: contrast(0.5) sería lo mismo que indicar filter: contrast(50%).

Rotación de colores

Cuando utilizamos la función hue-rotate(), proporcionaremos como parámetro una cantidad de ángulos. Esa cantidad realiza una rotación de colores (hue-rotate) que se puede ver facilmente si observamos una rueda de colores. El número de grados definido por parámetro especifica la rotación aplicada a los colores:

Rotación de colores (Matiz HUE)

La función opacity

La propiedad opacity ya existe en CSS fuera de los filtros CSS como una propiedad independiente. Sin embargo, también existe como función de filtro de CSS. Ten en cuenta que si se utilizan ambas no se sobreescriben, sino que puedes obtener una opacidad superior (ambas sumadas).

Ejemplos en vivo de filtros

Veamos en vivo como funcionarían los filtros con esta imagen:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev