<!DOCTYPE html>
<html>
  <head>
    <title>Prueba de Filtro GreyScale</title>
  </head>
  <body>
    <img class="estado1" src="https://www.canopart.me/wp-content/uploads/2019/12/Me_So.jpg">
    <img class="estado2" src="https://www.canopart.me/wp-content/uploads/2019/12/Me_So.jpg">
    <img class="estado3" src="https://www.canopart.me/wp-content/uploads/2019/12/Me_So.jpg">
  </body>
</html>
img {
  width: 250px; height:250px;
}
.estado1 {
  filter: grayscale(0%);
}
.estado2 {
  filter: grayscale(0.5)
}
.estado3 {
  filter: grayscale(100%);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.