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.
<!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.
<!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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
12 Feb, 2019
Like Article
Save Article