CSS Properties: How to change the color of an images to black and white?

Last update on February 22 2024 12:44:44 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to change the color of an image to black and white</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.greyScale { /* Defines a CSS class named "greyScale" */
-webkit-filter: grayscale(100%); /* Applies a grayscale filter for WebKit browsers */
filter: grayscale(100%); /* Applies a grayscale filter for non-WebKit browsers */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section of the document -->
<body><!-- Begins the body section of the document -->
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<p>Original image</p><!-- Paragraph indicating the original image -->
<img src="https://www.w3resource.com/html-css-exercise/css-properties/solution/filter-min.png" alt="filter" width="200" height="200"><!-- Image element displaying the original image -->
<p>Convert the image to grayscale:</p><!-- Paragraph indicating the action to be taken -->
<img class="greyScale" src="https://www.w3resource.com/html-css-exercise/css-properties/solution/filter-min.png" alt="filter" width="200" height="200"><!-- Image element with the "greyScale" class applied, converting the image to grayscale -->
</body><!-- Ends the body section of the document -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to change the color of an image to black and white using CSS.
Comments are added to both HTML and CSS to explain each section of the code.
The CSS <style> block defines a class named "greyScale", which applies a grayscale filter to the image.
Two <img> elements are present, one displaying the original image and the other displaying the same image with the "greyScale" class applied, effectively converting it to grayscale.
The grayscale filter is applied using both -webkit-filter and filter properties to ensure compatibility with different web browsers.

Live Demo:

See the Pen filter-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page