More creative effects can be created when you blend an element with other elements on the page.

We can use the mix-blend-mode on any image as we already saw in the previous demos. We can also use it to blend a piece of text, for example, with the image behind it, other text, color ...

The following demonstrates the usage of the mix-blend-mode with text. The left example has no blending. In the right example, mix-blend-mode is applied to <h3>. The text is blended with the background image behind it. The HTML of the right example is:

<div>
    <h3  style="mix-blend-mode: soft-light;">MIX-BLEND-MODE</h3>
</div>

We can blend any text also with background color as shown in the following examples. We define exactly the same blending as before, where instead of background image we have background color under the text.

See more examples in the following demos.