cssbackgroundcss-filtersbackground-blend-mode

CSS grayscale filter and background-blend-mode at same time?

I'm trying to treat an image the same way it is in a photoshop file - desaturating the image to grayscale, and then applying a color overlay with a multiply blend mode. To this end, I am styling a CSS background image with...

.someclass
{
    /* grayscale */
    -webkit-filter: grayscale(1); 
    filter: gray; 
    filter: grayscale(1);
    filter: url(desaturate.svg#greyscale);

    /* multiply */
    background-color: rgba(190, 50, 50, 0.65);
    background-blend-mode: multiply;
}

The problem with this is that the grayscale filter ends up desaturating red color for the blend mode. In other words, the multiply is occurring first and then the grayscale. How do I switch it so that the grayscale is applied first and then the blend mode is applied second?

I have created a fiddle (http://jsfiddle.net/g54LcoL1/1/) for the code and a screenshot (made in Photoshop) of what I would expect the the fiddle result to look like. The bottom most image, div.grayscale.multiply, should be colored red.

enter image description here

Solution

  • You can not do it with filter, but you can do it staying with blend mode for everything

    the grayscale equivalent in blend is luminosity, with the image as source and a solid white as backdrop

    So the background images, from bottom to top, are:

    1. white (as background-color)
    2. your image
    3. solid red (that must be specified as a gradient for now)

    and the blend modes are luminosity and multiply

    .test {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(0deg, red, red), url("https://i.sstatic.net/WIMBV.png");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}
    <div class="test"></div>