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.
Grayscale Example
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%);
}
Try it Yourself »
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.
