mix-blend-mode er kanskje ikke noe man kommer til å bruke ofte, men det er kanskje noe man ikke visste fantes til å begynne med. I korte trekk sier det noe om hvordan et element skal blende med andre elementer som overlapper og bakgrunnen.

Det er altfor mange mulige metoder å velge mellom, så jeg kommer ikke til å skrive dem alle her, men hvis man har erfaring fra Photoshop vil man kjenne igjen de fleste. I dette eksempelet kan vi se hvordan sirkler og farger påvirkes av overlapp og mix-blend-mode

<div class="isolate">
	<div class="circle circle-1"></div>
	<div class="circle circle-2"></div>
	<div class="circle circle-3"></div>
</div>

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate;
  position: relative;
}

mix-blend-mode er godt støttet i dag så det er ingen grunn til å ikke ta det i bruk.