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 Create a Black and White Image Using CSS
The CSS filter property with the grayscale() function allows you to convert colored images to black and white. This effect removes all color information from an image, creating a monochrome appearance.
Syntax
selector {
filter: grayscale(percentage);
}
Possible Values
| Value | Description |
|---|---|
0% |
Original image (no grayscale effect) |
100% |
Completely grayscale (black and white) |
50% |
Partially grayscale (semi-desaturated) |
Example 1: Alternating Black and White Images
This example applies grayscale filter to even-positioned images −
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 150px;
margin: 10px;
border-radius: 10px;
object-fit: cover;
}
img:nth-of-type(even) {
filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="/css/images/sample1.jpg" alt="Sample Image 1">
<img src="/css/images/sample2.jpg" alt="Sample Image 2">
<img src="/css/images/sample3.jpg" alt="Sample Image 3">
</body>
</html>
Three images appear in a row. The first and third images display in full color, while the second image appears in black and white due to the grayscale filter.
Example 2: Hover Effect with Grayscale
This example creates an interactive hover effect where images become grayscale on mouse hover −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: inline-block;
margin: 15px;
}
.hover-grayscale {
width: 250px;
height: 200px;
object-fit: cover;
border-radius: 8px;
transition: filter 0.3s ease;
}
.hover-grayscale:hover {
filter: grayscale(100%);
}
</style>
</head>
<body>
<div class="image-container">
<img src="/css/images/nature1.jpg" alt="Nature" class="hover-grayscale">
</div>
<div class="image-container">
<img src="/css/images/nature2.jpg" alt="Landscape" class="hover-grayscale">
</div>
</body>
</html>
Two colored images are displayed. When you hover over either image, it smoothly transitions to black and white. When you move the mouse away, the image returns to its original colors.
Example 3: Partial Grayscale Effect
This example demonstrates different levels of grayscale intensity −
<!DOCTYPE html>
<html>
<head>
<style>
.grayscale-demo {
display: flex;
gap: 15px;
align-items: center;
}
.grayscale-demo img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 8px;
}
.original { filter: grayscale(0%); }
.partial { filter: grayscale(50%); }
.full { filter: grayscale(100%); }
.label {
text-align: center;
margin-top: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grayscale-demo">
<div>
<img src="/css/images/colorful.jpg" alt="Original" class="original">
<div class="label">Original (0%)</div>
</div>
<div>
<img src="/css/images/colorful.jpg" alt="Partial" class="partial">
<div class="label">Partial (50%)</div>
</div>
<div>
<img src="/css/images/colorful.jpg" alt="Full" class="full">
<div class="label">Full (100%)</div>
</div>
</div>
</body>
</html>
Three identical images are displayed side by side. The first shows the original colors, the second shows a partially desaturated version with 50% grayscale, and the third shows a completely black and white version.
Browser Support
The filter: grayscale() property is well-supported in modern browsers. For older browser compatibility, you may include the -webkit-filter prefix, though it's generally not needed for current browsers.
Conclusion
The CSS filter: grayscale() property provides an easy way to create black and white effects on images. You can use percentage values to control the intensity and combine it with transitions for smooth interactive effects.
9K+ Views
