Code Run - Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:white;
}
img {
  width: 30%;
  height: auto;
  float: left; 
  max-width: 220px;
}

.blur {filter: blur(6px);}
.brightness {filter: brightness(220%);}
.contrast {filter: contrast(140%);}
.grayscale {filter: grayscale(120%);}
.huerotate {filter: hue-rotate(150deg);}
.invert {filter: invert(120%);}
.opacity {filter: opacity(60%);}
.saturate {filter: saturate(6);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(6px 6x 7px purple);}
</style>
</head>
<body>

<h2>Image Filters</h2>

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer or Edge 12.</p>

</body>
</html>