Screen Shot 2021-07-07 at 10.33.58 AM.png

Mix-Blend-Mode Property

Published on 08/06/2021
Help Article Design
Erica Manning
Leiout Developer

Let's learn about the mix-blend-mode property! The mix-blend-mode property sets how an element's content should blend with the content of the element's parent and the element's background. There are many different values that the mix-blend-mode property can have. This property can be great for hero images with text over them. Listed below are the different values that the mix-blend-mode property can have and what they do.

How To: Mix-Blend-Mode Hero

First, you need to set up your HTML correctly. You should have a div that contains the background image, and within that div should be another div that contains your text. 


Next, you need to set up your CSS correctly. The div class hero-image in this case should have the background image set and isolation should be set to isolate. This is so that a new stacking context will be created and the children elements can not escape this stacking context. (The isolation property can also be replaced with position: absolute; and z-index: 1;). 

Then, the div class hero-text in this case should have its position set to relative so that it can work with the pseudo-element. Next, the pseudo-element ::after needs to be set up for the hero-text. This pseudo-element means that it inserts something directly after the class hero-text. In this case, we want it to be in the same position as the hero-text class because this is where we put our background colors. For this to work, we need to content to contain nothing, the position to be absolute so that it stays on top of the hero-text class. We also need a z-index of -1 so that it is actually underneath the text so we can see the text. The inset is similar to margin and needs to be set to something. In this case it's set to 0. Finally, you set your background to a color or gradient and set the mix-blend-mode to one of the values. You can also play around with opacity to give it a different effect.  


Find your adventure

Explore beyond your imagination

With us, it's easy. Talk to one of our professional trip planners today.

Lottie Animations

26, Feb 2023
Help Article
Navik Mega Menu

This article explains how to create and use the mega menu functionality in Leiout navigation menus.

20, Sep 2021
Help Article Design
Google Translate

This article explains how to install and use Google's translate javascript library and implement a b...

20, Sep 2021
Help Article

This article explains how to use the Isotope JavaScript library and shows an example of it in action...

02, Aug 2021
Help Article Plugins