CSS Click Chart

Blending and Compositing

Allows you to "blend" HTML, SVG elements, and backgrounds, using effects like "multiply", "darken", "luminosity", etc. that are common in graphics editors.

Specification

The mix-blend-mode and background-blend-mode properties on W3C.

Example Code

Live Demonstration

The images below (one inline, one background) are altered using CSS blending modes.

Guitar and Amplifier

Browser Support

Can I Use css-mixblendmode? Data on support for the blending-modes feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles