I’m definitely late to the party! though it is better than not to show up at all 😎

There are a ton of articles on internet about the moderately latest CSS properties such as filter, background-blend-mode and mix-blend-mode. Neglecting the fact that it is not possible to use these features in production apps in near future (due to lack of old browsers support), I just wanted to look how it works.

tl;dr

Pixr - CSS Image Editor

filter

Applies different filters on top of image. Browser support

Eg:

.image {
    -webkit-filter: blur(2px) saturate(110%);
    filter: blur(2px saturate(110%));
}

background-blend-mode

Background image is blended with background color of the same element. Browser support

Eg:

.bg-image {
    background-image: url('img.jpg');
    background-color: deeppink;
    background-blend-mode: multiply;
}

mix-blend-mode

A div is blended on top of another div with background image. Browser support

Eg:

.bg-image {
    background-image: url('img.jpg');
    background-color: deeppink;
}
.overlay-div {
    width: 400px;
    height: 300px;
    background-color: yellow;
    mix-blend-mode: lighten;
}

Here is a demo for all these three properties.

Pixr - CSS Image Editor