Convert an image to grayscale in HTML/CSS

By : Ken

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?

It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.

I know I can do it with both SVG and Canvas, but that seems like a lot of work right now.

Is there a truly lazy person's way to do this?

By : Ken


Maybe this way help you

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);

By : YuZA

Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.

img {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

/* Disable grayscale on hover */
img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
<img src="">

What about Internet Explorer 10?

You can use a polyfill like gray.

A new way to do this has been available for some time now on modern browsers.

background-blend-mode allows you to get some interesting effects, and one of them is grayscale conversion

The value luminosity , set on a white background, allows it. (hover to see it in gray)

.test {
  width: 300px;
  height: 200px;
    background: url(""), white; 
    background-size: cover;

.test:hover {
    background-blend-mode: luminosity;
<div class="test"></div>

The luminosity is taken from the image, the color is taken from the background. Since it is always white, there is no color.

But it allows much more.

You can animate the effect setting 3 layers. The first one will be the image, and the second will be a white-black gradient. If you apply a multiply blend mode on this, you will get a white result as before on the white part, but the original image on the black part (multiply by white gives white, multiplying by black has no effect.)

On the white part of the gradient, you get the same effect as before. On the black part of the gradient, you are blending the image over itself, and the result is the unmodified image.

Now, all that is needed is to move the gradient to get this effect dynamic: (hover to see it in color)

div {
    width: 600px;
    height: 400px;

.test {
    background: url(""), 
linear-gradient(0deg, white 33%, black 66%), url(""); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
<div class="test"></div>


compatibility matrix

By : vals

This video can help you solving your question :)
By: admin