In this tutorial, we will see the mix-blend-mode in CSS, mix-blend-mode is a CSS property with solves the problems of the banner image with some text on it. so let’s get started.

Mix-blend-mode In CSS

There has always been a problem with banner and the text color when there is a multi-color or any picture banner and the text upon the banner sometimes hide due to the color combination.

It mainly occurs when both the banner color and the text color are almost the same, or different color combination hides the text might be unable to read properly.

To overcome this issue we can use mix-blend-mode. You can see the browser support on this link www.caniuse.com/#search=mix-blend-mode

Browser Support

HTML Banner Section

let’s start with the HTML content which will contain banner and text message on it.

<section #banner>
    <img src="https://codyhouse.co/assets/img/gems/hero/3d-animated-mockup-featured-new.svg" />
    <h1>
      Text On Image Using <br/>
      mix-blend-mode in CSS<br/> 
    </h1>
</section>

Mix-blend-mode in CSS

Now will apply the mix-blend-mode effect to the heading. Let’s get into CSS Property.

All you have to do is to define color and apply the CSS property

h1{ 
  color:#ffb;
  mix-blend-mode: difference;
  text-align :center; 
}

Mix-blend-mode: All Prperties