How to Display Text on Image With CSS3 mix-blend-mode

Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip: text; property, however it’s still an experimental feature without sufficient browser support.

The CSS alternative to show an image background behind a text is using the mix-blend-mode property. Blend modes for HTML elements are fairly supported across all modern desktop and mobile browsers with the exception of a few, such as Internet Explorer.

In this post, we’re going to see how mix-blend-mode (two of its modes specifically) works, and how you can use it to display a text with image background in two use cases:

1. when the background image can be seen through the text
2. when the background image runs around the text

Read Also:  10 (More) CSS Tricks You Probably Overlooked

See some examples in the demo below (images are from unsplash.com).

The mix-blend-mode CSS property defines how the content and the backdrop of an HTML element should blend together colorwise.

Read Also:  CSS3 Blending Mode

Have a look at the list of blending modes, out of which we’ll use multiply and screen in this post.

First, let’s look into how these two specific blend modes work.

How multiply & screen blend modes work

Blending modes technically are functions that calculate a final color value using the color components of an element and its backdrop.

The multiply blend mode

In the multiply blend mode, the individual colors of the elements and their backdrops are multiplied, and the resulting color is applied to the final blended version.

The multiply blend mode is calculated according to the following formula:

B(Cb, Cs) = Cb × Cs

where: Cb – Color component of the backdrop Cs – Color component of the source element B – Blending function

When Cb and Cs are multiplied, the resulting color is a blend of these two color components, and is as dark as the darkest of the two colors.

To create our text image background, we need to focus on the case when Cs (the color component of the source element) is either black or white.

If Cs is black its value is 0, the output color will also be black, because Cb × 0 = 0. So, when the element is colored black, it doesn’t matter what color the backdrop is, all we can see after blending is black.

If Cs is white its value is 1, the output color is whatever Cb is, becauseCb × 1 = Cb. So in this case we see the backdrop directly as it is.

The screen blend mode

The screen blend mode works similarly to the multiply blend mode, but with the opposite result. So, a black foreground shows the backdrop as it is, and a white foreground shows white with whatever backdrop.

Let’s quickly see its formula:

B(Cb, Cs) = Cb + Cs - (Cb × Cs)

When Cs is black (0), the backdrop color will be shown after the blending, as:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

When Cs is white (1) the result will be white with any backdrop, as:

Cb + 1 -(Cb × 1) = Cb + 1 - Cb = 1

1. Image shown through text

To display text showing through its background image, we use the screen blend mode with black text and white surrounding space.

<div class="backdrop">
 <p class="text">Water</p>
</div>

.backdrop {
 width: 600px; height: 210px;
 background-image: url(someimage.jpg);
 background-size: 100%;
 margin: auto;
}
.text {
 color: black;
 background-color: white;
 mix-blend-mode: screen;
 width: 100%;
 height: 100%;
 font-size: 160pt;
 font-weight: bolder;
 text-align: center;
 line-height: 210px;
 margin: 0;
}

Currently our text looks like below, in the next step we’ll add custom color to the background.

Adding color

As you might’ve guessed by now, using blend modes leave us only two color choices for the area that surrounds the text — black or white. However with white, it’s possible to add some color to it using an overlay, if the overlay color matches nicely with the image used.

To add color to the surrounding area, add a <div> to the HTML for an overlay, and give it a background color with high transparency. Also use the mix-blend-mode: multiply property for the overlay, as it helps the background color of the overlay to blend a bit better with the image appearing inside text.

<div class="backdrop">
 <p class="text">Water</p>
 <div class="overlay"></div>
</div>

.overlay {
 background-color: rgba(0,255,255,.1);
 mix-blend-mode: multiply;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
}

With this technique, we could color the surrounding area around the text with the image background:

Note that the technique works well only with subtle transparent colors. If you use a fully opaque color, or a color that doesn’t match with the image, the image appearing inside the text will have a very visible tint of the color used, so unless it’s a look that you’re going for, avoid opaque colors.

2. Text surrounded by image background

Even though a normal text placement over an image background requires the same technique, I’m going to show you an example of how the above demo looks like when the effect is reversed, i.e. when the text color is white and the background is black.

.text {
 color: white;
 background-color: black;
 mix-blend-mode: screen;
 width: 100%;
 height: 100%;
 font-size: 160pt;
 font-weight: bolder;
 text-align: center;
 line-height: 210px;
 margin: 0;
}

You can use the same overlay in order to add some color to the text, unless you want to keep it white.

.overlay {
 background-color: rgba(0,255,255,.1);
 mix-blend-mode: multiply;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
}

And below you can see how the reverse case looks like:

Note that in Internet Explorer, or any other browser that doesn’t support the mix-blend-mode property, the image background won’t appear, and the text will remain black (or white).