Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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:

View Demo

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

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    Do / Undo Functionality with MooTools

    We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

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

    • Andrew

      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.

  4. Divyateja

    Hi! Any idea of how we do it in react-native?

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