How to change the color of an image to black and white using CSS ?
Last Updated :
15 May, 2023
In this article, we will learn how to change the color of an image to black and white using CSS. The approach of this article is to change the color of an image to black and white using a filter property in CSS. It is used to set the visual effect of an element. This property is mostly used in image content.
We will see two different methods for converting the image to black and white using CSS.
Using grayscale() method: Basically, we use a grayscale() method to convert the element colors into black and white. The grayscale 0% indicates the original element and 100% indicates a completely grayscale element.
Syntax:
filter: grayscale(100%)
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to change the color of an images
to black and white using CSS?
</title>
<style>
.gfg {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to change the color of an images
to black and white using CSS?
</h2>
<img src=
<br>
<b>After Convert to Black and White</b> <br>
<img class="gfg"
src=
</body>
</html>
|
Output:
Using the “brightness” and “saturate”: This is another way to convert the image. Brightness will be used to adjust the brightness while saturation will be used for adjusting the saturation level.
Syntax:
filter: brightness(0.5) saturate(0%);
Example: In this example, we will use the above method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to change the color of an images
to black and white using CSS?
</title>
<style>
.gfg {
filter: brightness(0.5) saturate(0%);
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to change the color of an images
to black and white using CSS?
</h2>
<img src=
<br>
<b>After Convert to Black and White</b> <br>
<img class="gfg"
src=
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...