Color Blend Tests

by jamessouth

HTML

<div>
  normal
</div>
<div class="multiply">
  multiply
</div>
<div class="screen">
  screen
</div>
<div class="hard-light">
  hard-light
</div>
<div class="overlay">
  overlay
</div>
<div class="darken">
  darken
</div>
<div class="lighten">
  lighten
</div>
<div class="soft-light">
  soft-light
</div>
<div class="color-dodge">
  color-dodge
</div>
<div class="color-burn">
  color-burn
</div>
<div class="difference">
  difference
</div>
<div class="exclusion">
  exclusion
</div>

CSS

div {
  width: 100px;
  height: 75px;
  line-height: 75px;
  text-align: center;
  float: left;
  color: white;
  background-color: rgb(255, 102, 42);
  background-image: url('https://user-images.githubusercontent.com/166440/34760908-89de1b46-f5d9-11e7-8b58-a1c2c3b92037.png');
  background-size: contain;
}

.multiply {
  background-blend-mode: multiply;
}

.screen {
  background-blend-mode: screen;
}

.hard-light {
  background-blend-mode: hard-light;
}

.overlay {
  background-blend-mode: overlay;
}

.darken {
  background-blend-mode: darken;
}

.lighten {
  background-blend-mode: lighten;
}

.soft-light {
  background-blend-mode: soft-light;
}

.color-dodge {
  background-blend-mode: color-dodge;
}

.color-burn {
  background-blend-mode: color-burn;
}

.difference {
  background-blend-mode: difference;
}

.exclusion {
  background-blend-mode: exclusion;
}