Редактор кода W3Schools - Tryit

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 33%;
  height: auto;
  float: left;
  max-width: 235px;
}

.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

<p><b>Note:</b> Свойство фильтра не поддерживается в Internet Explorer или Edge 12..</p>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>img {  width: 33%;  height: auto;  float: left;  max-width: 235px;}​.blur {filter: blur(4px);}.brightness {filter: brightness(250%);}.contrast {filter: contrast(180%);}.grayscale {filter: grayscale(100%);}.huerotate {filter: hue-rotate(180deg);}.invert {filter: invert(100%);}.opacity {filter: opacity(50%);}.saturate {filter: saturate(7);}.sepia {filter: sepia(100%);}.shadow {filter: drop-shadow(8px 8px 10px green);}</style></head><body>​<p><b>Note:</b> Свойство фильтра не поддерживается в Internet Explorer или Edge 12..</p>​<img src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="blur" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="brightness" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="contrast" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="grayscale" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="huerotate" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="invert" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="opacity" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="saturate" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="sepia" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="shadow" src="../images/pineapple.jpg" alt="Pineapple" width="300" height="300">​</body></html>                