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
Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
mix-blend-mode | 41.0 | Not supported | 32.0 | 8.0 | 35.0 |
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
Value | Description |
---|---|
normal | This is default. Sets the blending mode to normal |
multiply | Sets the blending mode to multiply |
screen | Sets the blending mode to screen |
overlay | Sets the blending mode to overlay |
darken | Sets the blending mode to darken |
lighten | Sets the blending mode to lighten |
color-dodge | Sets the blending mode to color-dodge |
color-burn | Sets the blending mode to color-burn |
difference | Sets the blending mode to difference |
exclusion | Sets the blending mode to exclusion |
hue | Sets the blending mode to hue |
saturation | Sets the blending mode to saturation |
color | Sets the blending mode to color |
luminosity | Sets the blending mode to luminosity |