Escala de grises y sepia: grayscale y sepia

Los siguientes dos filtros tienen sus raíces en la fotografía: al principio, las fotografías eran en blanco y negro o tenían el tono marrón de la tinta sepia.

Con los filtros de escala de grises y sepia podemos darles a las fotografías un aspecto «antiguo».

Escala de grises: grayscale. Admite valores numéricos de 0 a 1 y porcentajes de 0% a 100%. Con un valor de 0 o 0%, el elemento se muestra sin cambios.

.effect {
  filter: grayscale(1); /* conversión completa a escala de grises */
  filter: grayscale(50%); /* efecto de escala de grises al 50% */
}

Sepia: sepia. Admite los mismos valores que grayscale.

.effect {
  filter: sepia(1); /* efecto sepia completo */
  filter: sepia(25%); /* efecto sepia al 25% */
}