cssbackground-blend-modemix-blend-mode

Different result when using mix-blend-mode and background-blend-mode


I've noticed that when using mix-blend-mode the result is different than when using background-blend-mode even though you're using the same blending mode.

For example, compare the 2 results below:

Image with background-blend-mode Image with mix-blend-mode

I've copied in my setup and JSFiddles below:

HTML

<div class="background">
  <div class="overlay"></div>
</div>

CSS

.background{
  width:200px;
  height:200px;
  //background-color:green; //toggle depending on what you want to use
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.overlay{
  width:100%;
  height:100%;
  background-color:green; //toggle depending on what you want to use
  mix-blend-mode:soft-light;
}

JSFiddle

Using mix-blend-mode: https://jsfiddle.net/p8gkna87/

Using background-blend-mode: https://jsfiddle.net/p8gkna87/1/

Some background information

I'm currently replicating a photoshop design which uses the soft-light blending mode and at the same time also uses an opacity of 51%. So it wouldn't be able to use background-blend-mode as the opacity cannot be applied to the same object.


Solution

  • background-blend-mode blends with its background-image and its background-color.

    mix-blend-mode blends with its backdrop, the part what is behind itself, and its background-color.

    Here is an article describing mix-blend-mode quite well:

    Put in another way, and in your case, with your mix-blend-mode you blend a green color on top of the image, with your background-blend-mode you do the opposite.

    So by having the same layer order, both blend-modes look the same

    .background,
    .background2{
      display: inline-block;
    }
    
    .background{
      width:200px;
      height:200px;
      background-color:green;
    }
    .overlay{
      width:100%;
      height:100%;
      mix-blend-mode:soft-light;
      background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
      background-size:cover;
    }
    
    .background2{
      width:200px;
      height:200px;
      background-color:green;
      background-blend-mode:soft-light;
      background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
      background-size:cover;
    }
    <div class="background">
      <div class="overlay"></div>
    </div>
    
    <div class="background2">
    </div>