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
Convert the colors of the object to 256 shades of gray with CSS
The CSS grayscale() filter is used to convert the colors of an element to 256 shades of gray. This filter is part of the CSS filter property and allows you to remove color saturation from images, text, and other elements.
Syntax
selector {
filter: grayscale(value);
}
Possible Values
| Value | Description |
|---|---|
0 or 0%
|
No grayscale effect (original colors) |
1 or 100%
|
Completely grayscale (no color) |
0.5 or 50%
|
50% grayscale effect |
Example: Grayscale Effect on Image and Text
The following example applies a grayscale filter to both an image and colored text −
<!DOCTYPE html>
<html>
<head>
<style>
.grayscale-image {
filter: grayscale(100%);
width: 200px;
height: 150px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
border-radius: 10px;
margin: 20px;
}
.grayscale-text {
font-size: 30px;
font-family: Arial Black;
color: #ff0000;
filter: grayscale(100%);
margin: 20px;
}
.partial-grayscale {
filter: grayscale(50%);
font-size: 24px;
color: #4CAF50;
margin: 20px;
}
</style>
</head>
<body>
<div class="grayscale-image"></div>
<div class="grayscale-text">CSS Tutorials</div>
<div class="partial-grayscale">Partial Grayscale Effect</div>
</body>
</html>
A colorful gradient box appears in grayscale (black and white). Red text "CSS Tutorials" appears in gray. Green text "Partial Grayscale Effect" appears with reduced color saturation.
Browser Support
The grayscale() filter is supported in all modern browsers. For older versions of Internet Explorer, you may need to use the legacy filter property.
Conclusion
The grayscale() filter effectively converts colored elements to grayscale. Use values between 0% and 100% to control the intensity of the effect.
Updated on: 2026-03-15T11:31:16+05:30
209 Views
Advertisements