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();
<!-- 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= "b2.jpg" width="500px" height="250px" alt="filter applied" /> </body> </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= "logo.jpg" width="500px" height="250px" alt="filter applied" /> <img class = "image2" src= "logo.jpg" width="500px" height="250px" alt="filter applied" /> </body> </html>