Filtros CSS

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	Valor	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 de sombras CSS)

( ¹ ) 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:

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.