Make Grayscale or Black and White Image using CSS

CSS3 has some great features to work with images. The one that I am going to discuss in this article is how to convert a colored image into a black and white image using CSS.

Though exactly we shouldn’t call the converted image black and white. Actually, it should be called a grayscale image. Generally, we see the video on old television are actually grayscale videos, but we all call it black and white in general. So in this article, we will use the general term.

Now let’s start converting our colored image into black and white.

In CSS, there is a filter property that we can use to make a grayscale picture from a colored one. We are going to use this CSS filer property to do our task. The CSS filter property generally used to define visual effects.

Now suppose we have an image on the web page:

<img src="girl-in-green.jpg">

Now we will apply the CSS code to our image.




Below is the CSS code snippet that will convert the image into a black and white:

img {
  -webkit-filter: grayscale(100%);   /* For Safari 6.0 to 9.0 */
  filter: grayscale(100%);
}

Now if we see the result on the browser, we will able to see the black and white version of the image instead of the colored image.

Below is given our original image and the image after applying our CSS code:

Original Image before applying CSS

Original image

 

Black and White image after CSS applied

 

In our code, we have applied the CSS to our ima tag. But we can also take a class for our image and apply our CSS to the class just like we can see below:

<img class="bw-img" src="girl-in-green.jpg">
.bw-img {
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}

If we check the output, we will see the same result. But in this case, our CSS code will only make those image black and white that has the “bw-img” class.

 

Also, read:

 


2 responses to “Make Grayscale or Black and White Image using CSS”

  1. Saruque Ahamed Mollick says:

    Found this useful and easy too to create b&w images using CSS

Leave a Reply

Your email address will not be published. Required fields are marked *