css set image to grayscale

css

To set an image to grayscale using CSS, you can use the filter property with the grayscale value. For example:

img {
    filter: grayscale(100%); /* make the image completely grayscale */
}

You can also use a percentage value to control the intensity of the grayscale effect. For example, to make the image 75% grayscale:

img {
    filter: grayscale(75%); /* make the image 75% grayscale */
}

Note that the filter property is not supported in all browsers, so you may need to use vendor prefixes. For example:

img {
    -webkit-filter: grayscale(100%); /* for Chrome, Safari, and Opera */
    -moz-filter: grayscale(100%); /* for Firefox */
    -ms-filter: grayscale(100%); /* for Internet Explorer */
    filter: grayscale(100%); /* for modern browsers */
}

Alternatively, you can use the gray value of the image-rendering property to apply a grayscale effect to an image. This property is supported in all modern browsers. For example:

img {
    image-rendering: gray;
}