CSS Blend Modes

Demonstration of all CSS blend modes

by adil_invideo

HTML

<h3>CSS Blend mode examples</h3>
<div class="parent" id="parent">

</div>

CSS

body {
  font-family: sans-serif;
  background-color: wheat;
}

h3 {
  text-align: center;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 30px;
  justify-content: center;
}

.image-container {
  position: relative;
}

.image {
  width: 300px;
}

.text {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: red;
  font-size: 30px;
  font-weight: 600;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

JavaScript

const imgSrc = "https://cdn.pixabay.com/photo/2018/05/07/10/48/husky-3380548_150.jpg";
const blendModes = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity"
];

const parent = document.getElementById("parent");
blendModes.forEach(mode => {
  var div = document.createElement('div');
  div.classList.add("image-container");
  
  var img = document.createElement('img');
  img.classList.add("image");
  img.style.mixBlendMode = mode;
  img.src = imgSrc;
	img.width = 400;
  img.height = 300;
  var text = document.createElement('div');
  text.classList.add("text");
  text.innerHTML = mode;
  
  div.appendChild(img);
  div.appendChild(text);
  
  parent.appendChild(div);
});