How to create a black and white image with CSS?

Learn, how can we create a black and while image with CSS?
Submitted by Apurva Mathur, on August 03, 2022

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.

To create a black and white image with CSS, we'll use the filter grey scale value of the 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:

filter: grayscale(value %)

The maximum value of this property is 100%; this will perfectly turn a normal image into a black and white image.

HTML and CSS code to create a black and white image

<!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>

Output:

CSS Tutorial & Examples »

How to add visual effects to images with CSS?

How to create a contact form with CSS?

Comments and Discussions!

Top MCQs

Top Programs/Examples