<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 275px;
background:#0080ff;
}
img{
width: 250px;
height: 125px;
}
#point{
mix-blend-mode: normal;
}
#point1{
mix-blend-mode: multiply;
}
#point2{
mix-blend-mode: screen;
}
#point3{
mix-blend-mode: overlay;
}
#point4{
mix-blend-mode: darken;
}
#point5{
mix-blend-mode: lighten;
}
#point6{
mix-blend-mode: color-dodge;
}
#point7{
mix-blend-mode: color-burn;
}
#point8{
mix-blend-mode: difference;
}
#point9{
mix-blend-mode: exclusion;
}
#point10{
mix-blend-mode: hue;
}
#point11{
mix-blend-mode: saturation;
}
#point12{
mix-blend-mode: color;
}
#point13{
mix-blend-mode: luminosity;
}
</style>
</head>
<body>
<h1>CSS mix-blend-mode Property</h1>
<h2>mix-blend-mode: normal</h2>
<div>
<img id="point" src="car-left.png">
</div>
<h2>mix-blend-mode: multiply</h2>
<div>
<img id="point1" src="car-left.png">
</div>
<h2>mix-blend-mode: screen</h2>
<div>
<img id="point2" src="car-left.png">
</div>
<h2>mix-blend-mode: overlay</h2>
<div>
<img id="point3" src="car-left.png">
</div>
<h2>mix-blend-mode: darken</h2>
<div>
<img id="point4" src="car-left.png">
</div>
<h2>mix-blend-mode: lighten</h2>
<div>
<img id="point5" src="car-left.png">
</div>
<h2>mix-blend-mode: color-dodge</h2>
<div>
<img id="point6" src="car-left.png">
</div>
<h2>mix-blend-mode: color-burn</h2>
<div>
<img id="point7" src="car-left.png">
</div>
<h2>mix-blend-mode: difference</h2>
<div>
<img id="point8" src="car-left.png">
</div>
<h2>mix-blend-mode: exclusion</h2>
<div>
<img id="point9" src="car-left.png">
</div>
<h2>mix-blend-mode: hue</h2>
<div>
<img id="point10" src="car-left.png">
</div>
<h2>mix-blend-mode: saturation</h2>
<div>
<img id="point11" src="car-left.png">
</div>
<h2>mix-blend-mode: color</h2>
<div>
<img id="point12" src="car-left.png">
</div>
<h2>mix-blend-mode: luminosity</h2>
<div>
<img id="point13" src="car-left.png">
</div>
</body>
</html>