How TO - Black and White Images

Learn how to create a "black and white" image with CSS.

Black and White Image

Original image

grayscale(100%)

Use the CSS filter property to convert an image to black and white.

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%);
}

Go to our CSS Images Tutorial to learn more about how to style images.

Go to our CSS filter Property to learn more about CSS filters.