How to change the color of an image to black and white using CSS?


CSS (Cascading Style Sheets) is a powerful language used to control the visual presentation of web pages. One of the most important things that we can do with CSS is change the color of an image to black and white on the webpage.

Changing the color of an image to black and white using CSS is a simple process that can be done using a few different methods. In this article, we will learn three different methods for converting an image to black and white using CSS.

  • Method 1 − Using the "grayscale" filter

  • Method 2 − Using the "brightness" and "saturate" filters

  • Method 3 − Using the "hue-rotate" filter

Method 1: Using the "grayscale" filter

"grayscale" filter is a most basic and common way to change the color of an image to black and white using the CSS. This filter takes a value between 0% and 100%, with 0% indicating that the image should be in full color and 100% indicating that the image should be fully black and white. This filter can be applied to an image by adding the following CSS code to the image's CSS class.

Syntax

css-selector {
   /css code…
}

Example

Here is an example to change the color of an image in css using a "grayscale" filter.

<html>
   <title>Change the color of an image in css using a "grayscale" filter</title>
   <head>
      <style> 
         body {
            text-align:center;
         }
         .img{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <h3>Original Image</h3>
      <img src="/css/images/logo.png" alt="image">
      <h3>after using "grayscale" filter</h3><br>
      <img class="img" src="/css/images/logo.png" alt="image">
   </body>
</html>

Method 2: Using the "brightness" and "saturate" filters

By Using CSS, the "brightness" and "saturate" filters is a second method for converting an image to black and white. The "brightness" filter to be used to adjust the overall brightness of an image, while the "saturate" filter is used to adjust the saturation of an image.

Syntax

css-selector {
   filter: brightness(0.5) saturate(0%);
}

Example

Here is an example to change the color of an image in css using a "brightness" and "saturate" filters.

<html>
   <title>Change the color of an image in css using a "brightness" and "saturate" filters</title>
   <head>
      <style>
         body {
            text-align:center;
         }
         .img{
            filter: brightness(0.5) saturate(0%);
         }
      </style>
   </head>
   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <h3>Original Image</h3>
      <img src="/css/images/logo.png" alt="image">
      <h3>after using "brightness" and "saturate" filters</h3><br>
      <img class="img" src="/css/images/logo.png" alt="image">
   </body>
</html>

Method 3: Using the "hue-rotate" filter

The "hue-rotate" filter is used to rotate the hue of an image, which can be used to convert the image to black and white.

Syntax

css-selector {
   filter: hue-rotate(180deg);
}

Example

Here is an example to change the color of an image in css using a "hue-rotate" filter.

<html>
   <title>Change the color of an image in css using a "hue-rotate" filters</title>
   <head>
      <style> 
         body {
            text-align:center;
         }
         .img{
            filter: hue-rotate(180deg);
         }
      </style>
   </head>
   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <h3>Original Image</h3>
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb1.2.1&q=80&w=200"" alt="image">
      <h3>after using "hue-rotate" filters</h3><br>
      <img class="img" src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb1.2.1&q=80&w=200"" alt="image">
   </body>
</html> 

Conclusion

Converting an image to black and white using CSS is a simple process that can be done using a few different techniques. The "grayscale" filter, "brightness" and "saturate" filters, and the "hue-rotate" filter are all effective methods for completing this result.

Updated on: 09-Mar-2023

11K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements