<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
padding: 25px;
height: 240px;
width:240px;
margin-bottom:15px;
background: url(husky.jpg);
background-color: #ff4d4d;
background-repeat: no-repeat;
}
#point{
background-blend-mode: normal;
}
#point1{
background-blend-mode: multiply;
}
#point2{
background-blend-mode: screen;
}
#point3{
background-blend-mode: overlay;
}
#point4{
background-blend-mode: darken;
}
#point5{
background-blend-mode: lighten;
}
#point6{
background-blend-mode: color-dodge;
}
#point7{
background-blend-mode: color-burn;
}
#point8{
background-blend-mode: hard-light;
}
#point9{
background-blend-mode: soft-light;
}
#point10{
background-blend-mode: difference;
}
#point11{
background-blend-mode: exclusion;
}
#point12{
background-blend-mode: hue;
}
#point13{
background-blend-mode: saturation;
}
#point14{
background-blend-mode: color;
}
#point15{
background-blend-mode: luminosity;
}
</style>
</head>
<body>
<h1>CSS background-blend-mode Property</h1>
<h2>background-blend-mode: normal</h2>
<div id="point"></div>
<h2>background-blend-mode: multiply</h2>
<div id="point1"></div>
<h2>background-blend-mode: screen</h2>
<div id="point2"></div>
<h2>background-blend-mode: overlay</h2>
<div id="point3"></div>
<h2>background-blend-mode: darken</h2>
<div id="point4"></div>
<h2>background-blend-mode: lighten</h2>
<div id="point5"></div>
<h2>background-blend-mode: color-dodge</h2>
<div id="point6"></div>
<h2>background-blend-mode: color-burn</h2>
<div id="point7"></div>
<h2>background-blend-mode: hard-light</h2>
<div id="point8"></div>
<h2>background-blend-mode: soft-light</h2>
<div id="point9"></div>
<h2>background-blend-mode: difference</h2>
<div id="point10"></div>
<h2>background-blend-mode: exclusion</h2>
<div id="point11"></div>
<h2>background-blend-mode: hue</h2>
<div id="point12"></div>
<h2>background-blend-mode: saturation</h2>
<div id="point13"></div>
<h2>background-blend-mode: color</h2>
<div id="point14"></div>
<h2>background-blend-mode: luminosity</h2>
<div id="point15"></div> </body>
</html>