TIL About background-blend-mode

The background-blend-mode CSS property sets how an element’s background images should blend with each other and with the element’s background color.

For example, you can use it to monotone an image:

.hero {
  background-image: url('img.jpg');
  background-color: #7e7e7e;
  background-blend-mode: luminosity;
}

With luminosity the “luminosity of the top color is preserved whilst using the saturation and hue of the background-color”.

Further Reading