How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)

Many a times, there is necessity of converting Color image into Black and White or Grayscale.

Here in this very simple tutorial, we gonna show you, how to convert or change any Color image into Black and white

How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)

Step 1:

Add HTML : Load Color image :

<h2>Convert the image to grayscale:</h2>
<div class = color>
<img src="https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg" alt="VR" width="50%" height="30%">
</div>
<div class=black>
<img src="https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg" alt="VR" width="50%" height="30%">
</div>


<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

Step 2 :

Using Css Filter

.black{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  
  
}

 

Output and Full Code :

How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
You may Also Like
Scroll to top