How to create: Black and white image

Learn how to use CSS to create 'black and white' images.

Black and white image

Using CSS filter The property converts the image to a black and white image.

Original image

Grayscale (100%)

Change the color of all images to black and white (100% gray):

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
{}