filter

La propiedad de filtro define los efectos visuales (como desenfoque y saturación) a un elemento (a menudo <img>).

La propiedad CSS filter dota de efectos gráficos como el desenfoque o cambio de color en la imagen.

Los valores que toma esta propiedad se compone de varias funciones:

blur(px) : Aplica un efecto borroso a la imagen. Mientras mas alto sea el valor mayor sera el desenfoque. 

brightness(%): Ajusta el brillo de la imagen. 0% hará que la imagen sea completamente negra. 100% (1) es el valor predeterminado y representa la imagen original. Los valores superiores al 100% proporcionarán resultados más brillantes.

contrast(%): Ajusta el contraste de la imagen.

0% hará que la imagen sea completamente negra.

100% (1) es el valor predeterminado y representa la imagen original.

Los valores superiores al 100% proporcionarán resultados con menos contraste.

drop-shadow()

grayscale(%): Convierte la imagen a escala de grises.

0% (0) es el valor predeterminado y representa la imagen original.

100% hará que la imagen sea completamente gris (se utiliza para imágenes en blanco y negro).

Nota: No se permiten valores negativos.

hue-rotate(deg): Aplica una rotación de matiz en la imagen. El valor define el número de grados alrededor del círculo de color que se ajustarán las muestras de imagen. 0deg es el valor predeterminado y representa la imagen original.

Nota: El valor máximo es 360deg.

invert(%)

opacity(%): Establece el nivel de opacidad para la imagen. El nivel de opacidad describe el nivel de transparencia, donde:

0% es completamente transparente.

100% (1) es el valor predeterminado y representa la imagen original (sin transparencia).

Nota: No se permiten valores negativos.

Sugerencia: Este filtro es similar a la propiedad de opacidad.

saturate(%): Satura la imagen.

0% (0) hará que la imagen sea completamente no saturada.
100% es el valor predeterminado y representa la imagen original.
Los valores superiores al 100% proporcionan resultados super saturados.

Nota: No se permiten valores negativos.

sepia(%): Convierte la imagen en sepia.

0% (0) es el valor predeterminado y representa la imagen original.
100% hará la imagen completamente sepia.

Nota: No se permiten valores negativos.

url() - La función url () toma la ubicación de un archivo XML que especifica un filtro SVG y puede incluir un ancla a un elemento de filtro específico. Ejemplo: