CSS Tutorial : How to use mix-blend-mode

Here in this tutorial we are going to discuss a very unique feature of css which introduced in CSS 3 actually and we cant find this special feature in previous versions of CSS. This feature usually we can find in Adobe Photoshop.

Same features are available in CSS too.

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

So we design something by using background-blend-mode with screen. And our CSS code is given below.

<style>
.container{
background:url('nature.jpg') center/cover no-repeat; 
height:100vh;
background-size: 600px 400px;
}
.container:before{
content:'';
position: absolute;
background:#fff url('splash.png') center/cover no-repeat;
width:100%;
height:100%;
mix-blend-mode: screen;
background-size: 400px 400px;
}

</style>

we used 2 images to get our result. nature.jpg and splash.png , make sure one image must be a png.

The concept behind mix-blend-mode :

We used two image in this css one is behind another in which front is leaded by splash.png and behind image is of bridge which is called as nature.jpg. That’s it.

 

Do you like more css tutorial ?

• Understand Basic of CSS Animations
• Text Effects with CSS