- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.