Tools
Blend-Mode Explorer
Blend a color layer over an image with any of the 16 CSS mix-blend-mode values,
compare them at a glance, and copy the result. The classic way to tint photos and build duotones.
About blend modes
Blend modes control how a layer's pixels combine with whatever is behind them: the same Multiply, Screen
and Overlay you know from Photoshop. mix-blend-mode blends an element with the elements below
it; background-blend-mode blends an element's own background layers together.
Reach for them to tint a photo to your brand color (a color layer set to multiply or
overlay), to build duotones (pair with the filters playground),
or to knock text out of an image with difference. Performance is cheap; just remember a
blended element needs something behind it to react to.