Open In App

How to change color of PNG image using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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 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
        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 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
        width="500px" height="250px" alt="filter applied" /> 
          
        <img class = "image2" src
        width="500px" height="250px" alt="filter applied" /> 
    </body
</html


Output:



Last Updated : 12 Feb, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads