<div class="image">
  <img class="nofilter" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
  <img class="blur" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
  <img class="grayscale" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
  <img class="brightness" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
    <img class="sepia" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
   <img class="saturate" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
     <img class="invert" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
   <img class="huerotate" src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
</div>

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}