Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to change the color of an image to black and white using CSS ?

  • Last Updated : 30 Sep, 2021

The approach of this article is to change the color of an image to black and white using a filter property in CSS. It is used to set the visual effect of an element. This property is mostly used in image content.  

Basically we use a grayscale() method to convert the element colors into black and white. The grayscale 0% indicates the original element and 100% indicate completely grayscale element.  

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:  

filter: grayscale(100%)

Example:  

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change the color of an images 
        to black and white using CSS?
    </title>
  
    <style>
        .gfg {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
    </style>
</head>
  
<body>
    <h2>GeeksForGeeks</h2>
  
    <h2>
        How to change the color of an images 
        to black and white using CSS?
    </h2>
  
    <img src=
    <br>
  
    <b>After Convert to Black and White</b> <br>
    <img class="gfg" src=
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :