Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the color of an image to black and white using CSS?
To change the color of an image to black and white using CSS, you can apply CSS filter properties. This technique is useful for creating monochrome effects, hover states, or design themes without editing the original image files.
Syntax
selector {
filter: grayscale(value);
}
Method 1: Using the Grayscale Filter
The grayscale() filter is the most direct way to convert images to black and white. It accepts values from 0% (full color) to 100% (completely grayscale).
Example
In this example, we apply a 100% grayscale filter to convert the image to black and white
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 20px;
}
.original, .grayscale {
margin: 10px;
border: 2px solid #ccc;
}
.grayscale {
filter: grayscale(100%);
}
</style>
</head>
<body>
<h3>Original Image:</h3>
<img class="original" src="/css/images/logo.png" alt="Original colored image" width="150">
<h3>After Grayscale Filter:</h3>
<img class="grayscale" src="/css/images/logo.png" alt="Grayscale image" width="150">
</body>
</html>
Two images are displayed: the first shows the original colored logo, and the second shows the same logo converted to black and white using the grayscale filter.
Method 2: Using Brightness and Saturate Filters
You can combine brightness() and saturate() filters to achieve a black and white effect with more control over the final appearance.
Example
This example uses saturate(0%) to remove all colors and brightness() to adjust the contrast
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 20px;
}
.original, .filtered {
margin: 10px;
border: 2px solid #ccc;
}
.filtered {
filter: brightness(0.8) saturate(0%);
}
</style>
</head>
<body>
<h3>Original Image:</h3>
<img class="original" src="/css/images/logo.png" alt="Original colored image" width="150">
<h3>After Brightness and Saturate Filters:</h3>
<img class="filtered" src="/css/images/logo.png" alt="Filtered black and white image" width="150">
</body>
</html>
Two images are displayed: the original colored logo and the same logo converted to black and white with reduced brightness, creating a slightly darker monochrome effect.
Filter Values
| Filter | Values | Effect |
|---|---|---|
grayscale() |
0% to 100% | Converts to grayscale |
saturate() |
0% to 200%+ | Controls color intensity |
brightness() |
0% to 200%+ | Controls lightness/darkness |
Conclusion
Converting images to black and white using CSS filters is straightforward and doesn't require image editing software. The grayscale() filter provides the simplest solution, while combining brightness() and saturate() offers more creative control over the final appearance.
16K+ Views
