Como cambiar una imagen de color a blanco y negro con puro CSS

Una de las formas más fáciles hoy en día para cambiar una imagen de color a blanco y negro es simplemente usando un editor de imágenes.

¿Pero alguna vez te has preguntado si esto es posible con CSS?

La realidad y la buena noticia es que hoy en día y con la nueva versión de CSS3 esto es posible.

La mala noticia es que algunos navegadores no soportan todavía esta propiedad, especialmente ese famoso navegador con la letra E en azul.

¿Quién será se imaginan?

Internet Explorer

Como pueden ver aquí abajo. Aquí tenemos una imagen a color la cual estaremos cambiando a blanco y negro con CSS.

Imagen a color

En este caso estaremos usando la propiedad de filter con el valor de grayscale.

Si quieres que esto funcione dentro de Chrome, Opera, y Safari especialmente dentro de las versiones donde comenzaron a soportar esta propiedad.

Por favor incluye la regla completa de CSS que te muestro aquí abajo.


img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Este es el resultado después de aplicar la propiedad.

Imagen a color

Recuerda esto no va a funcionar dentro de Internet Explorer y para eso necesitamos aplicar otros métodos, pero eso ya va a ser para otro artículo.

Ver video como cambiar una imagen de color a blanco y negro con puro CSS