<p>▼ grayscale(100%)</p>
<img src="https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg" alt="" class="image monochrome">
<p>▼ grayscale(50%)</p>
<img src="https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg" alt="" class="image monochrome2">
<p>▼ オリジナル</p>
<img src="https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg" alt="" class="image original">

.image {
  width: 500px;
}

.monochrome {
  filter: grayscale(100%)
}

.monochrome2 {
  filter: grayscale(50%)
}