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?
- 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: