MixBlend Mode

I have been looking to find those CSS properties that are slowing coming into support but that I might not relay on just yet in a project. Lately, I have been focusing a lot on Sketch. I wanted to dig back into some CSS action. I actually found a place for flexbox in something I was coding today. It got me out of a jam . Mix Blend Mode allows you to control how content should blend with the content of the element that it sits on and the background. Below is a list of all the different values you can use.

mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset;

I made a few quick examples so we can see how powerful this can be.

This fiddle uses “darken”

This fiddle uses “exclusion”

The usage at the moment for this is really bad. Most recent Chrome/Firefox have no issues but there is no support for IE11.