Mix-Blend-Mode in CSS and my face
Will it blend? Before you start scrolling down to see the magic of CSS blendmodes I can already tell you this: my face will blend on this page. To make this a little less scary: I'm using a picture of past-me from Winter 2013 in order to test the mix-blend-mode property with its different values. After that I'm going to explain in a few words how you can get involved and where to find an in-depth article on the subject.
This is a really really dumbed down version of what one could call a demonstration, so don't expect some really magical things to happen. Okay? Thanks!
So, shall we?
Normal and Multiply
As it's quite obvious that nothing will change when I set the blend-mode to "normal" you can hardly tell I set the value for the second image on "multiply". Yet, looking very closely you can spot a difference in the color of the trees and the snow.
Screen and Overlay
Again, it's quite hard to spot the difference between the two blend modes in effect but apart from the fact that "screen" makes me disappear a little bit better than "overlay" at least something drastic happened – the image blends into the white background of the page pretty nicely.
Darken and Lighten
I suppose you start to question what I'm up to on this page, right? The image on the left looks just like mix-blend-mode: normal and the other one made me 99% invisible. Okay, that could have been done with opacity: 0 as well.
Color-Dodge and Color-Burn
Alright. I made the almost white background really really white with the first blendmode but with the second one finally something really interesting happened. This looks just like a very old photograph, which faded over a few decades. Turning the background into some nice sepia would only add to the effect I suppose.
Hard-Light and Soft-Light
Finally ... colors. Or at least that blue beanie really stands out against the overly white background. I lost my nose but it could be worse. On the right, again, we're looking at an almost invisible version of myself.
Difference and Exclusion
Looks like I've inverted the photograph but it's actually not what happens here. Difference will only invert colors on a white background (Duh, I have a white background on this page.) and exclusion … it does the same but different. You may put some nice color behind the images to see the effect.
Hue and Saturation
Nothing on the left and on the right someone made a pee-pee in the snow. Wow! The effects! Am I inside the Matrix already? Is there a spoon? Well, hue takes the saturation and luminosity of the background color (Duh! White! Again!) and creates a new color by using the hue of the pixels in the image. Saturation does the same with the hue and luminosity of the background, while using the saturation of image.
Luminosity
Suddenly I turned myself into a grayscale me. Now, that's a worthwhile effect right there. Or is it? As you must have already combined from the two previous examples: here we got the luminosity of the image taking the background hue and saturation in order to create the new colors... in this case, as the background is white the image turns into a grayscale image.
Marco, why did you blend your face?
I know, I know. That wasn't very impressive. But as you're the savvy developer that I think you are, I want you to fire up the Inspector in your most favorite browser.
Once open I want you to select the section elements (those with a class of "blendi").
Now, get crazy with the background: make it black, white, gray, a color, a gradient, a different image linked from wherever. That will give you instant feedback and show you how far one can go with blendmodes in CSS. Of course you can switch away my image for something more appealing to you (whatever that may be).
Last but not least a word on browser support: it's complicated. Have a look at the Caniuse.com table and be amazed by the issues in Safari and be unimpressed by the complete lack of support in IE (and Edge).
Have a little teaser on what could happen
There's more people playing with blendmodes
Thanks to Sara Soueidan there's a much better and way more detailed explanation on what blendmodes can achieve. Luckily for all of us, she also created a few demos which are not appaling to look at and make better use of those CSS blending techniques (not only mix-blend-mode but also background-blend-mode will be explained).
Hello-ho? Why are you still here? I expect you to click that link and read her article, now!