Using CSS3’s Blend Mode Property to Create Window Text

 

Although it may look complex, creating a window text effect is actually really easy to do using CSS and the mix-blend-mode property. The mix-blend-mode property determines the way in which an element’s content should blend with the element’s background.

In terms of your HTML, all you need to create the above effect is a div with some text inside it. For this example, we used a div with a class of “main” that contained an h1.

The main purpose of the div is to be a container for the background image. The styling of your div should look something like this:

And your h1 should be styled similar to this:

At this point, you should have something that looks like the image below.

We’re almost finished! We only need to add a few lines of CSS to achieve the window text effect. Adjust your h1 CSS so it looks like this:

All you need to do is change the text color to white, add a background color of your choice, and add the mix-blend-mode property with a value of multiply, and you should find yourself with something that looks a lot like the image below.