Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Convert image into different color</title> <style> img { width: 40%; float: left; } .image-1 { filter: invert(100%); -webkit-filter: invert(100%); } .image-2 { filter: sepia(100%); -webkit-filter: sepia(100%); } </style> </head> <body> <h2>Change PNG image color</h2> <img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> <img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> </body> </html>