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:

• (link: http://codepen.io/akselkreis/pen/PqXgzE text: iOS 8 Photos Icon)
• (link: http://codepen.io/akselkreis/pen/rVZVWQ text: Spotlight - Combining RGB into white)
• (link: http://codepen.io/collection/XmrpGO/ text: A collection of mix-blend-mode examples on CodePen)