Apply grayscale filter to div

Question

quick example

Trying to apply a grayscale filter to the div that is over top of the main background. Wondering if this is possible at all with jQuery, CSS3, or HTML5. I was playing with a few of the new CSS3/HTML5 technologies but to no success.

I can't save it as two images because the background needs to stretch full-size, so it won't be exactly the same on every screen.

I'm working on an early draft and I am just wondering if I should kill this idea. If you point me in the right direction I can figure it out.

Once solution has just occurred to me, rather simple one, but not ideal. Save two images, color and b/w, and simply write some creative math to `background-position` the b/w into place. — deflime, Apr 02 '13 at 06:39
if your background needs to stretch you need _more_ clouds, not stretched ones... — Alnitak, Apr 02 '13 at 06:45
The graphic is massive, the screenshot only shows a small portion. — deflime, Apr 02 '13 at 06:54
For a "canvas+jquery with transition effect" solution: http://stackoverflow.com/questions/7704415/how-to-apply-the-grayscale-jquery-plugin-to-a-background-image/24949717#24949717 — lepe, Jul 25 '14 at 06:53

score 14 · Answer 1 · answered Apr 02 '13 at 06:49

14

You can use CSS filters:

#mydiv{
    -webkit-filter: grayscale(1);
}

Keep in mind that this works on Chrome and Safari at the moment.

More info: http://caniuse.com/#feat=css-filters

answered Apr 02 '13 at 06:49

manutenfruits

1,447
3
17
25

2

update 2021: works for all major browsers except IE – drac_o Nov 30 '21 at 11:46
hello from 2023 – olfek Feb 15 '23 at 17:12

Daniel Imms · Accepted Answer · 2013-04-02T07:03:35.957

You can't apply a "grayscale everything behind me" filter in CSS.

If you don't mind full screen with loss of aspect ratio (which may not matter depending on your cloud image) here is a technique. It places a div on top of the background that is half the width and uses background-size:200% 100% so that it will size the same as the background. Then we apply CSS3 grayscale and the older versions of it. Then a pseudo-element on top to darken the image.

Tested and works in: Chrome 25, Firefox, IE9 (I assume 7, 8 as well) currently.

jsFiddle

enter image description here

.gray {
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    width:50%;
    height:100%;
    background-size:200% 100%;
    position:relative;

    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}
.gray:after {
    display:block;
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.7;
}
body {
    margin:0;
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    height:100%;
    background-size:100% 100%;
}
html {
    height:100%;
}

I see where you're going with this, it's a much more optimized solution than I had come up since the the graphics are very large. — deflime, Apr 02 '13 at 06:58
Would need a bit of work to get support right but the idea seems pretty solid to me. — Daniel Imms, Apr 02 '13 at 07:03

score 4 · Answer 3 · answered Jun 26 '18 at 14:08

You can do this by applying a mix-blend-mode to the div on the top, with a white background :

.divOnTop {
     background: white;
     mix-blend-mode: saturation;
}

Be careful to the z-index.

For more on mix-blend-mode :

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

score 2 · Answer 4 · answered Apr 02 '13 at 06:48

CSS makes it simple to provide 'grey-scale' or transparent backgrounds using rgba values. Alternatively you can use transparent images.

An example is here http://jsfiddle.net/TtSUD/

in your css you apply an rgba value to a background as such:

#background_div{background-color:rgba(150,150,150,0.5);}

The first three values are for the amount of red green and blue, the fourth value is the percentage of opaqueness. 1 = 100% opaque, 0.5 = 50% opaque/transparent.

Hope this helps...

score 0 · Answer 5 · answered Apr 26 '21 at 19:56

backdrop-filter

However, it has mixed support at the time of writing - Chrome, Edge, Safari, Opera, but surprisingly not Firefox. Give it some time for major browsers, I guess. I wouldn't expect IE to ever support it, though.

Here is an example where the first row of blocks are in color, and then the second row of blocks are also in color, but are covered by an overlay that uses backdrop-filter on it.

.content, .overlay {
  position: absolute;
  width: 100%;
  height: 50%;
}

.content.second-content, .overlay {
  top: 50%;
}

.overlay {
  backdrop-filter: grayscale(1);
}

.content .color {
  display: inline-block;
  position: relative;
  height: 100%;
  width: 30%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class="content">
  <div class="color red"></div>
  <div class="color blue"></div>
  <div class="color yellow"></div>
</div>
<div class="content second-content">
  <div class="color red"></div>
  <div class="color blue"></div>
  <div class="color yellow"></div>
</div>
<div class="overlay">
</div>

score 0 · Answer 6 · answered Feb 25 '22 at 21:03

0

2022: You can now grayscale everything with vast support for browsers (except IE). You do not have to use the webkit prefix either:

filter: grayscale(1);

answered Feb 25 '22 at 21:03

Epic Speedy

636
1
11
25

score -1 · Answer 7 · answered Apr 02 '13 at 18:12

-1

You could make the background image a greyscale version of the image behind it. That should work. You just have to position the backgrounds right.

answered Apr 02 '13 at 18:12

coulbourne

489
1
8
16

Apply grayscale filter to div

7 Answers7

Linked