Converting an Image to Grayscale using CSS

Use-Cases of this tutorial

  • Know how to convert an image to black and white using CSS.
  • Know about the CSS grayscale filter property.

An image can be converted to grayscale or black & white by applying the "grayscale" CSS filter on it. Even a partial grayscale conversion can be done.

Sometimes we would like to show a black & white image in the webpage. To do so, we don't need to do it manually using an image editor like Photoshop. An image can be directly rendered as grayscale using CSS.

The conversion of image to black & white is possible with the filter CSS property. We use the grayscale() CSS function as its value.

#someimg {
	filter: grayscale(1);
}

The grayscale() CSS function accepts a number or percentage indicating the amount of conversion required to black & white. A value of 1 or 100% means the image will be fully converted to grayscale. With a value of 0 or 0%, the image will remain the same. Values in between will partially convert the image to black & white.

#someimg {
	/* 50% grayscale */
	filter: grayscale(0.5);
}
#someimg {
	/* 80% grayscale */
	filter: grayscale(80%);
}
#someimg {
	/* no effect on image */
	filter: grayscale(0);
}

If no parameter is passed for the grayscale() filter, it is set to 100% as default.

Cropping and Resizing Images in CSS using object-fit and object-position
Loading Comments