#    
## Overview
**Cascading Style Sheet (CSS)** is used to design user interfaces in a visually appealing way. 

CSS3 is the latest version that was shipped, and it has a lot of great abilities to make this job easier.

Using CSS, you can produce the black and white version of a colored image. 

In the picture below, two variations of the same image are shown. The second image from left to right is the black and white version of the first.

![](/api/edpresso/shot/6464536483201024/image/6367782077202432)

## Code
Below is the code used for converting an image to grayscale:

<html>
 <head>
   <style>
     img{
       height:145px;
       width:300px;
     }
      .img {
          -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
          filter: grayscale(100%);
          }
          .inline{
              display:inline;
          }
    </style>
 </head>
 <body>
 
   <div class="inline">
     <img src="https://images.unsplash.com/photo-1637441696821-a588f1557227?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
     <img  class="img" src="https://images.unsplash.com/photo-1637441696821-a588f1557227?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
   
   </div>
 </body>
</html>

codemirror

# 
## Explanation

* A free image from #key# Unsplash: https://unsplash.com/ #key# was linked to in two different `<img>` tags, and their height and width were specified.
* The image with the `.img` class name was given the `filter` style with a `grayscale(100%)` value, and the other one was left normal.

* This **`grayscale(100%)` value** is responsible for changing the colored image to black and white. The `grayscale` value in CSS  reduces the color content of an image, with 100% being the most reduced. To get different gray shades of an image, you will want to keep tampering with the `100%` value until you get what you want.

How to convert an image to grayscale with CSS

Overview

Code

Explanation