Image transparency with CSS

Pro tip: you can make the white pixels in your image files look transparent using just CSS!

To do this, use the mix-blend-mode property:

img.clear-white {
  mix-blend-mode: multiply;
}

That snippet will cause all images with the “clear-white” class to display as though their white pixels were transparent.

This technique is especially useful if you are working in an environment that doesn’t have great tools for controlling transparency in the actual image files.

The mix-blend-mode property is currently supported by Chrome, Firefox, and Safari. Since Microsoft has adopted the Chromium project for Edge, maybe we will see support in Edge soon.

For more great info on CSS mix-blend-mode and how to use it, check out this article on CSS Tricks.