mix-blend-mode: multiply

By  on  

One of my favorite interview questions is "how do you stay current on emerging front-end techniques and APIs?"  I always get the standard "blogs" and "RSS" answers but rarely do I ever hear "from gurus on Twitter."  I find that strange because I learn loads from Twitter, especially when it comes to CSS, because a tiny snippet can do something really neat.

I had heard CSS mix-blend-mode was something awesome but this blew my mind:

Essentially, using mix-blend-mode: multiply; on an image with white background would turn that white into a level of opacity as though the image were a .png with opacity.  Whoa!  I created a demo here:

What an awesome bit of CSS!  Thanks to Wes Bos for the heads up on this nifty CSS feature!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

Discussion

  1. zakius

    you know why twitter is bad source? cause it’s just like any channel throwing everything in single place: you’ll miss many important things, twitter is meant for things that are important only in a given moment, not for sharing knowledge

  2. Florian Reuschel

    Holy moly, this is amazing. Didn’t know that’s possible at all even if I always wished for this feature.
    Well, I learn stuff like that from sites like this. Thanks! :)

  3. Heather

    I wanted to use this on a recent website I made to save the client uploading heavy PNGs. But it doesn’t work in Edge or IE so had to remove it :(

    • I usually save between 50-80% of filesize by using http://tinypng.com to optimize my pngs. You should give it a go, it works wonders.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!