How to use Mix-blend mode in CSS

css tutorial mix-blend-mode

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.

layer style

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.

background:url('nature.jpg') center/cover no-repeat; 
background-size: 600px 400px;
position: absolute;
background:#fff url('splash.png') center/cover no-repeat;
mix-blend-mode: screen;
background-size: 400px 400px;


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

css tutorial mix-blend-mode

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 ?


1 thought on “How to use Mix-blend mode in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

  +  35  =  45