<section>
  <div class='normal'></div>
<div class='multiply'></div>
<div class='screen'></div>
<div class='overlay'></div>
<div class='darken'></div>
</section>
<section>
  <div class='lighten'></div>
<div class='color-dodge'></div>
<div class='color-burn'></div>
<div class='difference'></div>
<div class='exclusion'></div>
</section>
<section>
  <div class='hue'></div>
<div class='saturation'></div>
<div class='color'></div>
<div class='luminosity'></div>
</section>

body {
  background-color: black;
}
section {
  display: flex;
}
div {
  width: 50px;
  height: 50px;
  background-color: red;
  border: 2px solid black;
  margin: 5px;
}

.normal {
  mix-blend-mode: normal;
}
.multiply {
  mix-blend-mode: multiply;
}
.screen {
  mix-blend-mode: screen;
}
.overlay {
  mix-blend-mode: overlay;
}
.darken {
  mix-blend-mode: darken;
}
.lighten {
  mix-blend-mode: lighten;
}
.color-dodge {
  mix-blend-mode: color-dodge;
}
.color-burn {
  mix-blend-mode: color-burn;
}
.difference {
  mix-blend-mode: difference;
}
.exclusion {
  mix-blend-mode: exclusion;
}
.hue {
  mix-blend-mode: hue;
}
.saturation {
  mix-blend-mode: saturation;
}
.color {
  mix-blend-mode: color;
}
.luminosity {
  mix-blend-mode: luminosity;
}