The CSS filter property applies graphical effects like blurring or color shifting to an element. The grayscale() function is one of these effects, converting an image to shades of gray. The value can be a number from 0 to 1 or a percentage from 0% to 100%, where 1 or 100% is completely grayscale and 0 or 0% leaves the image unchanged.
Example 1: Applying a full grayscale effect
.grayscale-image {
/* This applies a 100% grayscale filter to the image */
filter: grayscale(100%);
}
Explanation This code snippet defines a class grayscale-image that applies a full grayscale effect to any element it's assigned to. The grayscale(100%) value removes all color saturation from the element.
Example 2: Applying a partial grayscale effect
.partial-grayscale {
/* This makes the image 50% gray */
filter: grayscale(0.5);
}
Explanation Here, the grayscale(0.5) value applies a partial grayscale effect. The image will appear desaturated but not completely black and white, retaining some of its original color.
Example 3: Grayscale on hover
.image-hover-effect {
transition: filter 0.3s ease-in-out;
}
.image-hover-effect:hover {
/* The image becomes grayscale when the mouse hovers over it */
filter: grayscale(1);
}
Explanation This example adds a common interactive effect. The image appears in full color initially and smoothly transitions to full grayscale when a user hovers their mouse over it, thanks to the transition property.
Example 4: Combining grayscale with another filter
.multifilter-image {
/* Applying both grayscale and a sepia effect */
filter: grayscale(0.8) sepia(0.2);
}
Explanation You can apply multiple filter functions at once. This code applies an 80% grayscale effect and a 20% sepia tone, creating a unique, vintage look for the element.
Example 5: Grayscale on an entire container
.grayscale-container {
/* All child elements will inherit this grayscale effect */
filter: grayscale(1);
}
Explanation When you apply the filter property to a container element like a div, all the elements inside it, including text and images, will have the grayscale effect applied to them.
Example 6: Using calc() with grayscale
.calculated-grayscale {
/* Using calc() to determine the grayscale value */
filter: grayscale(calc(0.2 + 0.3));
}
Explanation This demonstrates using the calc() function within the grayscale() filter. This allows for dynamic calculation of the filter value, which can be useful in more complex scenarios or with CSS variables.
Example 7: Toggling grayscale with a class
HTML
<img src="image.jpg" class="my-image" alt="A colorful image">
<button onclick="document.querySelector('.my-image').classList.toggle('grayscale-on')">Toggle Grayscale</button>
CSS
.my-image.grayscale-on {
/* This class will apply the grayscale filter when added */
filter: grayscale(1);
}
Explanation This example combines HTML, CSS, and a bit of JavaScript for user interaction. Clicking the button adds or removes the grayscale-on class, effectively turning the grayscale effect on and off for the image.