CSS mix-blend-mode and GoGo Penguin

CSS

This week was a pretty straight forward win.

The aim was to reproduce the GoGo Penguin - Man Made Object cover, but figuring out blend modes in CSS. For some reason I felt this would be really complicated, but in the end it was super easy. One rule and I was done!

The main trick was not to use blend-mode from a background, but mix-blend-mode on the whole elements.

GoGo Penguin - Man Made Object https://codepen.io/loficodes/pen/PVXOjZ

Kasabian - 48:13: https://codepen.io/loficodes/pen/jdoNeX

MDN CSS mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode