mix-blend-mode

---

The mix-blend-mode property determines how an elements contents should blend with its parent element and background.

{ mix-blend-mode: multiply }

There are many values that can be used with mix-blend-mode, but one of the more interesting ones is multiply. The multiply value sets the predominant color of an image to the same color as the parent element's background color.

This works very effectively when there is high contrast between an image's main subject and the image's background.

Use Case

In the example below you can see that not only is the white background replaced by the parent element's gray background, but the shadows still remain. This can be tricky to pull off even with photo editing software, but can be accomplished with a single line of CSS.