How to change color of PNG image using CSS?

Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
        |hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

Example 1: This example use grayscale filter to change the colored image into grayscale image.

html

<!-- HTML code to change the png image color 
        using filter property -->
<!DOCTYPE html> 
<html> 
    <head> 
        <title>Convert into grayscale image</title> 
        <style> 
            img { 
                filter: grayscale(10); 
            } 
        </style> 
    </head> 
    
    <body> 
        <h2>Grayscale Image</h2> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
        width="500px" height="250px" alt="filter applied" /> 
    </body> 
</html>

Output: Original Image:

After applying filter:

Example 2: This example use many filter to the image.

html

<!-- HTML code to change the png image color 
        using filter property -->
<!DOCTYPE html> 
<html> 
    <head> 
        <title>Convert image into different color</title> 
        <style> 
            img { 
                width:40%;
                float:left;
            }
            .image1 {
                filter: invert(100%);
            }
            .image2 {
                filter: sepia(100%);   
            }
        </style> 
    </head> 
    
    <body> 
        <img class = "image1" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
        width="500px" height="250px" alt="filter applied" /> 
        
        <img class = "image2" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
        width="500px" height="250px" alt="filter applied" /> 
    </body> 
</html>

Output:

How to change color of PNG image using CSS?

Explore