background-blend-mode

background-blend-mode allows to blend together an element’s background images and/or background color behind the background images.

The background-blend-mode property is used to specify a blend mode for an element’s background layer. You can blend background-images together, or blend them with background-color. The background images will only blend with each other (they will not blend with any content that lies underneath the element itself). The values of this property are:

background-blend-mode:
    normal | multiply | screen | overlay | darken | lighten | color-dodge |
    color-burn | hard-light | soft-light | difference | exclusion | hue |
    saturation | color | luminosity

background-blend-mode: multiply is a useful one. normal has no any visible effect. See also פרבולות ותמונות. Some modes:

• multiply: the background-image and background-color are multiplied and typically this leads to a darker image than before.
• screen: multiplies the inverse of the two pixel colors. Screen is the opposite of multiply and using screen on white will result in a white image and on black will leave the image unchanged.
• darken: if the background-image is darker than the background-color then the image is replaced, otherwise it is left as it was
• lighten: if the background-image is lighter than the background-color then the image is replaced, otherwise it is left as it was
• difference: the result by subtracting the darker color of the background-image and the background-color from the lightest one. Blending with black produces no result. Blending with white inverts the other layer's color.Often the image will have a very high contrast.
• exclusion: similar to difference, but with lower contrast.

Example: press me.

div {
    background-image: url(images/forest.jpg);
    background-color: #51b7d3;
    background-blend-mode: luminosity;
}

If you are using multiple background images, then you can apply multiple background blend modes for those respectively. Remember that gradient is also an image. Thus, we can chain multiple background images, gradients and blend-modes together. In the following example, first each image will be blended with the background color and then it will be blended with the layer behind. The first image in the list is the top most image:

div {
    background-image: url(images/sample1.png), url(images/sample2.png), linear-gradient(red, yellow);
    background-color: blue;
    background-blend-mode: screen, overlay, multiply;
}

The gradient will be blended with the color by multiply mode. The samples2.png background will blended with the background color and the blended gradient using the overlay mode, and then the sample1.png background will blended with the already blended layers (gradient and sample2) and the background color using the screen blend mode.

mix-blend-mode

More creative effects can be created when you blend an element with other elements on the page. This is useful when the images you’re blending need to be foreground images (not background images), and when you want to blend a piece of text, for example, with the image behind it. This is where the mix-blend-mode property comes in.

The mix-blend-mode CSS property specifies how an element’s content should blend with its background (element backdrop that is the content behind the element). This means that any images or text, borders or headings will be influenced by this property. The mix-blend-mode property is similar to the background-blend-mode property, and takes the same blend mode values:

mix-blend-mode:
    normal | multiply | screen | overlay | darken | lighten | color-dodge |
    color-burn | hard-light | soft-light | difference | exclusion | hue |
    saturation | color | luminosity

Example:

We can get the effect of text behind image like in the following example: press me. The area of the image where it overlaps with the text is the text's backdrop, and that is where the blending happens. The code is the following:

                CSS:
                h1 {
                    mix-blend-mode: difference;
                    ...
                }
                HTML:
                <div>
                <img src="images/fresh-water.jpg" alt="Fresh Water">
                <h1>FRESH WATER</h1>
                </div>

Example:

And look also at the following that explains the trick: press me.

Example:

Using this bending you can create is see-through text like the following example:

In the above we used paragraph with white color on black background with multiply mode (you can use other dark backgrounds besides the black one). Try black color on white background with screen mode.

CSS:
    span {
        color: #fff;
        background-color: #000;
        mix-blend-mode: multiply;
        ...
    }
HTML:
    <div>
        <img src="images/forest.jpg" alt="forest">
        <span>LOOK</span>
    </div>

Example:

Using difference mode with black in white will change black to white and white to black like in the following example:

In the above we used circle with white background and difference mode on black text with white background. Circle became black and text under the circle changed to white.

Example:

You can also blend text with other text, allowing you to achieve nice colourful text overlapping effects like the following example: press me.

Using negative margins or relative positioning, you can shift the position of one word so that it overlaps with the word next to it, and then apply a mix-blend-mode to the word to blend it with the other word.

Note that it will blend the element with all the elements in the backdrop that it overlaps. Use isolation property to remove element from blending. For example:

div { isolation: isolate; }