How to change the Color of PNG Image with CSS? Filter property explained

0 5981

In this tutorial, we will explain how to change the color of the PNG image with the help of CSS. We will be using the Use the filter function to change the color of a png image in CSS.

The "filter property" is primarily used to set the visual effect of the image. There are many values of the filter property which are listed below for reference. Users can use the values as per the desired effect.

Note:

Filters are only supported in modern browsers. Old browsers do not support it. Use webkit-filter in modern browsers.

Syntax:

Filter property has the following values which can be used as per the requirement.

In the below sample code we are using saturate(), sepia() for conceptual understanding.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title> How to Change the Color of PNG Image With CSS </title>
    <style>
     .mid
    {
     width: 50%;
     margin: 0px auto;
     font-family: Verdana,Geneva,sans-serif;
     padding: 10px;

    }
     .mid h1
     {
      font-family: Verdana,Geneva,sans-serif;
      font-size: 17px;
      color: #000;


     }

       img  {
                width:25%;
                float:left;
            }
            .image1 {
                filter: saturate(0.5);
                -webkit-filter: saturate(0.5);
            }
            .image2 {
                filter: sepia(100%);
                -webkit-filter: sepia(100%);
            }
            .image3 {
                -webkit-filter: hue-rotate(180deg);
                  filter: hue-rotate(180deg);
            }


    </style>
  </head>
  <body>

    <div class="mid">
    <h1> Change the Color of PNG Image With CSS </h1>
         <img class = "image1" src=
"https://www.codingtag.com/img/code-1.png"
         alt="filter applied" />

        <img class = "image2" src=
"https://www.codingtag.com/img/code-1.png"
         alt="filter applied" />

          <img class = "image3" src=
"https://www.codingtag.com/img/code-1.png"
         alt="filter applied" />

    </div>
  </body>
</html>

Output: