As you can see adding mix-blend-mode can change how text is presented, couple this with a background-blend-mode and you can create some unique designs.

To begin create a div to serve as a container for our content, a div to hold our background-image and heading to apply the mix-blend-mode. Lets look at how to build the Charles Bukowski quote using both a background-blend-mode and mix-blend-mode.

The html is quite simple.

<div class="blend-container">
 <div class="blend-item bukowski">
   <h1><span>find</span><span>what</span>
    <span>you</span><span>love</span>
    <span>and</span><span>let</span>
    <span>kill</span><span>you</span>
   </h1>
  </div>
</div>

I have added a class to the blend-item, this class bukowski will add the background-image, background-color and background-blend-mode

You may have noticed that every word is wrapped in a span. This will allow each one to be individually targeted when applying different properties such as colour, fonts etc.

First start by defining our images, colours and general styling.

$image-two: url('../img/bukowski.jpg');
$colors: #556270, #4ECDC4, #C7F464, #FF6B6B, #C44D58, #6534ff;
$purple: #6534ff;
$width: 100%;

Next, style the container and the item we want to use. I have called these, blend-container and blend-item.

$image-two: url('../img/bukowski.jpg');
$colors: #556270, #4ECDC4, #C7F464, #FF6B6B, #C44D58, #6534ff;
$purple: #6534ff;
$width: 100%;

.blend-container,
.blend-item {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  width: $width;
}

.blend-item {
  align-items: center;
  background-size: cover;
  box-sizing: border-box;
  justify-content: center;

  h1 {
    font-size: 5rem;
    font-weight: 700;
    line-height: .5;
    margin: 0;
    padding: 0 24px;
    text-align: center;
    @media screen and (max-width: 400px) {
      font-size: 4.5rem;
      line-height: .7;
    }
  }
}

Create an array of colours. We will use this to style each span tag.

$colors: #556270, #4ECDC4, #C7F464, #FF6B6B, #C44D58, #6534ff;

To add our desired effects, we have set the background-blend-mode to darken. If you need to catchup on the different blend-modes you can here.

.bukowski {
 background: $image-two $purple center center / cover no-repeat;
 background-blend-mode: darken;

  h1 {
   mix-blend-mode: exclusion;
  }

  span {
    mix-blend-mode: color;
    @for $i from 1 through length($colors) {
      &:nth-child(#{length($colors)}n+#{$i}) {
        color: nth($colors, $i);
      }
    }
  }
}

Styling the text, we set the heading to exclusion and each word in our heading to color.

Using the array we already created, we write a loop that will add a new colour for each span. After each iteration the loop will begin again at the start. To avoid duplicate colours, you can add more colours to our array.

As you can see the mix-blend-mode is pretty powerful. The use of a background-image is optional. As you see below the mix-blend-mode will style work.

Taking this one step further, Consider the following example, a technique that is often used in graphic design and digital media.

Here we have and image and a heading.

The approach to recreate this is the same as the Bukowski example. We will need a container, a div and a heading. The only difference here is that we give the heading a background-color and a color.

$image-four: url('../img/ireland.jpg');
$background-white: #f4f3f1;
$irish-green: #009A49;
$irish-orange: #FF7900;

.ireland {
  align-items: center;
  background: $image-four center center / cover no-repeat;

  h1 {
   background-color: $background-white;
   color: $irish-green;
   line-height: 1.2;
   mix-blend-mode: hard-light;
  }
}

Removing the image we are left with

We then simply place the heading over our image to generate the effect.

So far we focused on combining mix-blend-mode and background-blend-mode. We can now focus on the mix-blend-mode alone.

Let's use the alphabet to understand mix-blend-mode.

$letter-num: 26;
$colors: #556270, #4ECDC4, #C7F464, #FF6B6B, #C44D58, #6534ff;

.text-blend {
 font-size: 7rem;
 font-weight: 700;
 letter-spacing: -1.2rem;

   @for $i from 1 through length($colors) {
     span {
       &:nth-child(#{length($colors)}n+#{$i}) {
         color: nth($colors, $i)
       }
     }
   }
 }

Adding a mix-blend-mode we get the following

We can go one step further and animate the mix-blend-mode