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(75%);
}

Nota: Aunque es la que se ha utilizado en el ejemplo, esta propiedad funciona con otros elementos, es decir, no debe aplicarse necesariamente sobre una imagen.

Funciones de filtros

Los filtros de CSS tienen a nuestra disposición un amplio abanico de funciones, listas para utilizar mediante la propiedad filter y aplicarlas a los elementos que queramos:

Función	Significado	Mínimo	Máximo	>100%
`grayscale`	Escala de blanco y negro	0% ¹	100% = B&N
`blur`	Grado de difuminado	Tamaño de radio (desenfoque)
`sepia`	Grado de color sepia	0% ¹	100% = sepia
`saturate`	Grado de saturación	0% = B&N	100% ¹	Sí
`opacity`	Grado de transparencia	0% = invisible	100% = visible ¹
`brightness`	Brillo	0% = negro	100% ¹	Sí
`contrast`	Contraste	0% = gris	100% ¹	Sí
`hue-rotate`	Rotación de color (matiz)	0/360deg ¹
`invert`	Invertir	0% ¹	100% = invertido
`drop-shadow`	Sombra idéntica	(Ver apartado función drop-shadow())

( ¹ ) Es el valor considerado como original

Nota: En las cantidades de se pueden utilizar indistintamente porcentajes (entre 0% y 100%) o valores numéricos con decimales (entre 0 y 1). Ej: filter: contrast(0.5) es lo mismo que filter: contrast(50%) .

Estas propiedades permiten alterar los colores, tonalidades o diferentes aspectos visuales, tal como se harían desde un programa de diseño gráfico. Por ejemplo, la rotación de colores (hue-rotate) se representa mediante una rueda de colores, donde el grado definido especifica el matiz que se le da a los colores, pudiendo alterarlo ligera o intensamente:

Rotación de colores (Matiz HUE)

Nota: La función opacity ya existe en CSS fuera de los filtros CSS. Puede utilizarse de forma independientemente, con el siguiente formato: opacity: 0.75.

Tabla de contenidos