25 December 2023

How to Add Text to an Image Using CSS3 mix-blend-mode

By Ronald Smith

Having text displayed on top of images can create a stunning effect. However, implementing this in CSS can be a bit tricky. Although the background-clip: text; property can be used, it is still an experimental feature that is not widely supported by browsers.

Luckily, there is a CSS alternative that allows us to display an image background behind text. This is achieved by using the mix-blend-mode property. Blend modes for HTML elements are well-supported in most modern desktop and mobile browsers, with a few exceptions like Internet Explorer.

In this article, I will explain how the mix-blend-mode property works and provide two examples of how you can use it to display text on an image background.

    Do you ever wonder how some web designs have text that lets the background image peek through? Or have you noticed how other designs have the background image surrounding the text? It’s pretty cool, right?

    Well, the secret behind this awesome effect is the mix-blend-mode CSS property. It’s like a magic spell that tells the browser how the content and the background should blend together in terms of color.

    Now, let’s get into the technical stuff. Blending modes are basically functions that calculate the final color value based on the colors of the element and its backdrop. In this post, we’ll focus on two specific blend modes: multiply and screen.

    The multiply blend mode works by multiplying the color values of the element and its backdrop. This creates a darker, blended color effect that lets the background image shine through the text in a subtle and beautiful way.

    On the other hand, the screen blend mode does the opposite. It multiplies the inverted color values of the element and its backdrop, creating a lighter, more transparent effect. This makes the background image wrap around the text, like a gentle wave surrounding a floating message in a bottle.

    Pretty cool, huh? You can see some examples of these blend modes in action in the demo below. The images used in the demo are sourced from unsplash.com, so you know they’ll look stunning.

    So there you have it! The mix-blend-mode CSS property is the secret ingredient that adds that extra touch of magic to web designs. Have fun experimenting with different blend modes, and let your creativity shine through!

    In the multiply blend mode, I multiply the individual colors of the elements and their backdrops. Then, I apply the resulting color to the final blended version.

    This is how I calculate the multiply blend mode:

    multiply blend mode = ((Cb * Cs) * B)

    Here’s what each part of the formula means:

    Cb – Color component of the backdrop

    Cs – Color component of the source element

    B – Blending function

    When I multiply Cb and Cs, I get a blend of the two colors. The resulting color is always as dark as the darkest color from the two.

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

    If the foreground color, Cs, is black, its value is 0. This means that the output color will also be black because black multiplied by any value is still black. So, when the element is colored black, it doesn’t matter what color the backdrop is – all we can see after blending is black.

    On the other hand, if the foreground color, Cs, is white, its value is 1. In this case, the output color will be the same as the backdrop color because white multiplied by any value is equal to that value. So, when the foreground color is white, 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. When the foreground color is black, it shows the backdrop as it is. However, when the foreground color is white, it shows white with whatever backdrop color is present.

    The formula for the screen blend mode is: B(Cb, Cs) = Cb + Cs – (Cb × Cs)

    When the value of Cs is 0, which means black, the backdrop color will be displayed after the blending process:

    Cb + 0 – (Cb × 0) = Cb + 0 – 0 = Cb

    If the value of Cs is 1, which means white, the resulting color will always be white, regardless of the backdrop:

    Cb + 1 – (Cb × 1) = Cb + 1 – Cb = 1

    1. Making the image visible through text

    To make the text appear over a background image, we can use the screen blend mode with black text and white surrounding space.

    Water

    .backdrop {

    width: 600px;

    height: 210px;

    background-image: url(someimage.jpg);

    background-size: 100%;

    margin: auto;

    }

    .text

    Currently, our text looks like this. In the next step, we’ll customize the background color.

    How to Add Text to an Image Using CSS3 mix-blend-mode

    Adding a Splash of Color

    You might be wondering how we can infuse some color into the area that encompasses the text. Well, it turns out we have just two color options to choose from: black and white. But fear not, because with a little trickery, we can still give it a pop of color — granted that the overlay color works harmoniously with the chosen image.

    To bring color into the mix, we need to add an overlay element to the HTML markup. This overlay should have a background color with a hint of transparency. Additionally, we want to apply the mix-blend-mode: multiply property to the overlay. This property helps the background color blend more seamlessly with the image inside the text.

    Water

    .overlay

    By employing this technique, we can beautifully color the backdrop surrounding the text with the chosen image:

    How to Add Text to an Image Using CSS3 mix-blend-mode

    Let me tell you a cool trick to make your text appear inside an image! It works best with subtle transparent colors, so don’t use fully opaque colors or ones that don’t match the image. Otherwise, the text will have a noticeable tint of the color used, unless you intentionally want that look. If you want to avoid that, stay away from opaque colors.

    2. Text surrounded by image background

    If you want to place text over an image background, you’ll need to use the same technique. Let me show you an example of how it looks when we reverse the effect – with white text on a black background.

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

    And here’s what it looks like in the reverse case:

    How to Add Text to an Image Using CSS3 mix-blend-mode

    Did you know that the mix-blend-mode property doesn’t work in Internet Explorer and some other browsers? It’s true! But don’t worry, I’m here to help explain what that means.

    When you use the mix-blend-mode property in your code, it allows you to blend the background image of an element with the text on top of it. This can create some really cool effects, like giving your text a transparent or semi-transparent look.

    But, if someone is using Internet Explorer or another browser that doesn’t support the mix-blend-mode property, they won’t be able to see the background image at all. Instead, the text will just appear in its default color, which is usually black or white.

    So, if you’re planning to use the mix-blend-mode property in your project, it’s important to keep in mind that not all browsers will support it. You may need to find an alternative solution or come up with a different design that doesn’t rely on this property.

    Hopefully, this information helps you understand why the background image might not appear in Internet Explorer or other unsupported browsers when using the mix-blend-mode property. Remember, I’m here to answer any other questions you might have!