No mix blend mode
Multiply mix
.box:first-child { background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } .box:last-child { background-color: purple; } .multiply-mix { mix-blend-mode: multiply; }
<div class="container"> No mix blend mode <div class="box"></div> <div class="box"></div> </div> <div class="container"> Multiply mix <div class="box multiply-mix"></div> <div class="box"></div> </div>