css filter to get an image "bluescale"?

Question

Is any way to turn an image "bluescale" or "greenscale" or any other color? Just like the filter in css ? Or maybe combination of filters ?

filter:grayscale(100%);

Thanks!

Found a solution, but its not "user friendly" for a non technical person : css3 grey image to blue color using filters?

I i;m hoping for a solution where you can give a "rgb" for the color you want to turn to.

Answer 1

You can get this effect easily with blend modes.

Set a background image of the color that you want in front of the image

And set blend-mode: color;

Support is not perfect, but filters have pretty much the same problem

.test {
    width : 200px;
    height: 200px;
    background-image: linear-gradient(blue, blue), url("https://picsum.photos/200/200");
    background-blend-mode: color;
}

<div class="test"></div>