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
Selected Reading
Converting an Image to Grayscale using CSS3
The CSS filter property with the grayscale() function is used to convert an image from color to grayscale. The grayscale filter removes all color information, leaving only the luminance values to create a black and white effect.
Syntax
selector {
filter: grayscale(percentage);
}
Possible Values
| Value | Description |
|---|---|
0% |
Original image (no grayscale effect) |
50% |
Partially grayscale (semi-desaturated) |
100% |
Completely grayscale (black and white) |
>100% |
Over-grayscale (same as 100%) |
Example: Converting Image to Grayscale
The following example shows how to apply a grayscale filter to an image −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
align-items: center;
margin: 20px;
}
.original {
border: 2px solid #ddd;
border-radius: 8px;
}
.grayscale {
filter: grayscale(100%);
border: 2px solid #ddd;
border-radius: 8px;
}
.label {
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div>
<img class="original" src="/css/images/logo.png" alt="Original Logo" width="120" height="120">
<div class="label">Original Image</div>
</div>
<div>
<img class="grayscale" src="/css/images/logo.png" alt="Grayscale Logo" width="120" height="120">
<div class="label">Grayscale Image</div>
</div>
</div>
</body>
</html>
Two identical images are displayed side by side. The left image shows the original colorful logo, while the right image shows the same logo converted to black and white using the grayscale filter.
Example: Partial Grayscale Effect
You can also create a partial grayscale effect by using values less than 100% −
<!DOCTYPE html>
<html>
<head>
<style>
.image-row {
display: flex;
gap: 15px;
justify-content: center;
margin: 20px;
}
.image-item {
text-align: center;
}
.image-item img {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
}
.grayscale-25 { filter: grayscale(25%); }
.grayscale-50 { filter: grayscale(50%); }
.grayscale-75 { filter: grayscale(75%); }
.grayscale-100 { filter: grayscale(100%); }
</style>
</head>
<body>
<div class="image-row">
<div class="image-item">
<img src="/css/images/logo.png" alt="Original">
<p>0% (Original)</p>
</div>
<div class="image-item">
<img class="grayscale-25" src="/css/images/logo.png" alt="25% Grayscale">
<p>25% Grayscale</p>
</div>
<div class="image-item">
<img class="grayscale-50" src="/css/images/logo.png" alt="50% Grayscale">
<p>50% Grayscale</p>
</div>
<div class="image-item">
<img class="grayscale-100" src="/css/images/logo.png" alt="100% Grayscale">
<p>100% Grayscale</p>
</div>
</div>
</body>
</html>
Four images are displayed in a row showing the gradual progression from the original colorful image to completely grayscale: original (0%), slightly desaturated (25%), moderately desaturated (50%), and completely black and white (100%).
Conclusion
The CSS grayscale() filter provides an easy way to convert images to black and white. Use 100% for complete grayscale conversion or lower percentages for subtle desaturation effects.
Updated on: 2026-03-15T13:45:15+05:30
268 Views
Advertisements