grayscale() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The grayscale() CSS function is used to apply a grayscale effect to an element, effectively converting its colors into shades of gray. The function accepts a value between 0 and 1, where 0 represents the original colors (no effect) and 1 represents a fully desaturated image (completely grayscale). Values between 0 and 1 create partial grayscale effects, allowing you to control the intensity of the desaturation.

This function is commonly used with the filter property, which enables a wide range of visual effects on images, backgrounds, and even HTML elements such as img or video. It is especially useful for creating hover effects, image transitions, or emphasizing UI elements by reducing color distractions.

For example, you can create a subtle hover effect on images:

img {
  filter: grayscale(0.5);
  transition: filter 0.3s ease;
}

img:hover {
  filter: grayscale(0);
}

Here, images start partially desaturated, and when hovered, they return to full color. You can also combine grayscale() with other brightness() or contrast() functions to achieve more complex visual effects.

The grayscale() function is supported on all modern browsers and works with both raster images and vector graphics applied through CSS. It provides an efficient way to add stylistic effects without modifying the original assets in an editor.

Syntax

grayscale() = grayscale( <number-percentage>? )

Values

number-percentagespecified as a <number> or a <percentage>. A value of 100% is completely grayscale, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.

Example

HTML

<body>



    <div class="image-container">

        <h2>Original Image</h2>

        <img src="https://picsum.photos/300/200" alt="Colorful landscape" class="original">

        

        <h2>Grayscale Applied (100%)</h2>

        <img src="https://picsum.photos/300/200" alt="Grayscale landscape" class="grayscale-effect">

    </div>



</body>

CSS

.image-container {

    text-align: center;

    font-family: sans-serif;

}



img {

    margin: 20px;

    border-radius: 8px;

    transition: filter 0.5s ease; /* Smooth transition when hovering */

}



/* The actual grayscale function */

.grayscale-effect {

    filter: grayscale(100%);

}



/* Optional: Turn off grayscale when you hover over the image */

.grayscale-effect:hover {

    filter: grayscale(0%);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS grayscale() function. Hover over a browser icon to see the version that first introduced support for this CSS function.