Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 496
Jeff Avatar asked Sep 14 '14 18:09

Jeff


People also ask

Why does mix blend-mode not work?

💡 If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements.

What is background blend-mode overlay?

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

What is mix blend-mode CSS?

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.


1 Answers

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("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}
<div class="test"></div>
like image 54
vals Avatar answered Oct 27 '22 13:10

vals