How to Create a Black and White Image with CSS

css
Published on January 14, 2020

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.

An colored image can be shown as black & white in the webpage using the CSS filter 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.

In this Tutorial