How TO – Black and White Images
Learn how to create a “black and white” image with CSS.
Black and White Image
Convert the image to grayscale:
Note: The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.
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):
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>Convert the image to grayscale:</p>
<img src=”pineapple.jpg” alt=”Pineapple” width=”300″ height=”300″>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
</body>
</html>