Blog
Select Page

CSS background-blend-mode property

Misc

You can choose from these different background blend mode properties to get the right effect.

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Demo

Open demo in a full window – https://demos.webdevpuneet.com/css/background-blend-mode/index.html

HTML

<div class="blend">

</div>

CSS

<style>
.blend { 
  width: 400px;
  height: 400px;
  background-color:red;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webdevpuneet.com/wp-content/uploads/2021/01/img_tree.gif"), url("https://webdevpuneet.com/wp-content/uploads/2021/01/paper.gif");
  background-blend-mode: darken;
}
</style>

Demo Video

I found this cool video on YouTube that explain more about CSS background-blend-mode property. You may want to have a look at it too.