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:

Example: Create a black and white image

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.