How to create a black and white image with CSS?

Black and white Images with CSS: In this tutorial, we will learn how to create a black and white image with CSS? By Apurva Mathur Last updated : July 26, 2023

As we all know CSS provides us many properties which help us to design a webpage more creatively do you know CSS not only designs a webpage, but it also edits the picture? It may sound weird, but the CSS filter property helps us to edit the picture according to our needs. We can add any number of values inside a picture to make it look more admirable.

Creating a black and white image with CSS

To create a black-and-white image with CSS, just use the grayscale value in the percentage of the CSS filter property. A "grayscale" version of an image uses a mix of black and white to represent the "value" of the colors. Value could be described as the amount of light a color absorbs or reflects, or how light or dark.

Syntax

Below is the syntax of CSS filter property with grayscale value to create a black-and-white image:

filter: grayscale(value %)

Convert an image to a purely black-and-white image

To convert an image to a purely black-and-white image, use the 100% grayscale value of the CSS filter property which is the maximum value of grayscale value.

Example to convert an image to black-and-white image using CSS

In this example, we have a colored image and we are converting this image to a black-and-white image with the help of CSS filter property by assigning the value of grayscale.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      img{
      margin: 20px;
      }
      .normal{
      width: 600px;
      height: 500px;
      }
      img.grayscale {
      width: 600px;
      height: 500px;
      filter: grayscale(100%);
      }
    </style>
  </head>
  <body>
    <span>
      <center>
        <h1>Orignal VS Greyscale filter property</h1>
      </center>
      <img class="normal" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
      <img class="grayscale" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
    </span>
  </body>
</html>

The output of the above example is:

CSS Examples »

How to add visual effects to images with CSS?

How to create a contact form with CSS?