The CSS mix-blend-mode property

Mix-blend-mode is an interesting addition to the CSS specification, it enables front-end developers to composite layers in CSS in a way previously available only to image editing programs. If you’re a designer, you know these effects as “Blend Modes” in Adobe Photoshop. The mix-blend-mode property belongs to the CSS Compositing and Blending Level 1 Spec.

For those unfamiliar with Photoshop, the blend mode is a way of combining 2 or more elements laid on top of one another into something new. Each element retains it’s original data, but when a blend-mode is applied – it can losslessly modify an image’s visual attributes and allow it to combine with other elements it overlaps.

What’s good?

* Gives front end developers & designers more parity with photoshop.
* Lets developers do in code what could only have been done using images previously.

  • Enables a developer focus on keeping visual concerns part of css, instead of wrapping it up in an image.
  • Syntax is easy to understand.

What’s not so good?

  • (link: http://caniuse.com/#search=mix-blend-mode text: Browser Support:) mix-blend-mode is fully supported in Firefox, Chrome and Opera. It’s partially supported in Safari on Mac & iOS. It’s not at all supported in any version of IE/Edge, Opera Mini or Android Browser.
  • Unexpected Behavior – I had to try some odd combinations to get mix-blend-mode: multiply; to work in Firefox with non-nested divs layered with nested divs. See example here.
  • Doesn’t seem to work with 3D Transforms.

After some experimenting with mix-blend-mode, I can say that it’s very promising so far, you can view some examples below: