Three ways to create a gray effect on website images

I’ve always preferred grayscale images because I think they look more artistic. Many image editors like Photoshop can easily convert your color images to grayscale. There are even options to adjust color depth and hue. Unfortunately, this effect is not easy to achieve on the web due to differences in browsers.
1. CSS Filter
Using the CSS filter property is probably the easiest way to convert an image to grayscale. Historically, Internet Explorer had a proprietary CSS property called filter to apply custom effects including grayscale.
Now, the filter property is part of the CSS3 specification and is supported in some browsers, including Firefox, Chrome and Safari. Previously, we also mentioned Webkit filters, which not only turn images to gray but also to sepia and blur effects.
Adding the following CSS style can turn the image into gray

Copy code

The code is as follows:

img {
-webkit-filter: grayscale(1); /* Webkit */
filter: gray; /* IE6-9 */
filter: grayscale(1); /* W3C */
}

Supports IE6-9 and Webkit browsers (Chrome 18+, Safari 6.0+, and Opera 15+)
(Note: This code has no effect on Firefox.)
2. Javascript
The second method is to use JavaScript. Technically, all browsers that support JavaScript should support JavaScript, including IE6 and below.

Copy code

The code is as follows:

3. SVG
The third method is from SVG Filter. You need to create an SVG file, write the following code in it, and save it as ***.svg

Copy code

The code is as follows:

Then using the filter properties, we can connect to the SVG file by the ID of the element in the SVG file

Copy code

The code is as follows:

img {
filter: url('img/gray.svg#grayscale');
}

You can also put it in a CSS file, for example:

Copy code

The code is as follows:

img {
filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200.3333%200%200%200%200%200%200%201%200'/></filter></svg>#grayscale");')
}

In summary, in order to support grayscale effects across browsers, we can use the above methods together with the following code snippet to achieve it. This code will support Firefox 3.5+, Opera 15+, Safari, Chrome, and IE

Copy code

The code is as follows:

img {
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1);
filter: grayscale(100%);
filter: url('../img/gray.svg#grayscale');
filter: gray;
}

We can leverage the above code with the JavaScript approach and just provide the CSS filter as a fallback in case JavaScript is disabled. This idea can be easily implemented with the help of Modernizr.

Copy code

The code is as follows:

.no-js img {
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1);
filter: grayscale(100%);
filter: url('../img/gray.svg#grayscale');
filter: gray;
}

OK, you can see the cool effect on your browser! !

<<: Simple example of HTML text formatting (detailed explanation)

>>: How to implement Hover drop-down menu with CSS