Blend Modes in CSS

1) CSS Difference Normal Backgrounds Blend Modes

<style type="text/css">

.bg-blend {
background-image: url("cls63.png");
background-color: #33b5e5;
background-blend-mode: Difference, Normal;
}

.normal-image {
background-image: url("cls63.png");
}

.just-color {
background: #33b5e5;
}

.exp > div {
float: left;
width: 250px;
height: 250px;
background-size: cover;
}

.exp {
width: 750px;
overflow: hidden;
}

</style>

<div class="exp">
<div class="just-color"></div>

<div class="normal-image"></div>

<div class="bg-blend"></div>
</div>

Output :)

2) CSS Multiple Backgrounds Blend Modes

<style type="text/css">

.bg-blend {
background-image: url("cls63.png");
background-color: #33b5e5;
background-blend-mode: multiply;
}

.normal-image {
background-image: url("cls63.png");
}

.just-color {
background: #33b5e5;
}

.exp > div {
float: left;
width: 250px;
height: 250px;
background-size: cover;
}

.exp {
width: 750px;
overflow: hidden;
}

</style>

<div class="exp">
<div class="just-color"></div>

<div class="normal-image"></div>

<div class="bg-blend"></div>
</div>

Output :)