Blend Mode Overview

To not have to manually go through all possible values for mix-blend-mode in the dev tools and see their behavior in dark/light mode immediately, I built this overview and had some fun with CSS in the process.

See the Pen Blend Mode Overview by Nils Riedemann (@nocksock) on CodePen.

I usually do this in Figma, but I want to build more of these tiny tools. Just because it's a good exercise, it lets me experiment with different tools/ approaches, and most importantly, it's fun.

Fully embracing CSS nesting and CSS Variables is really fun and efficient and might loosen my stance on the tailwind discussion a bit.

I might work on this more outside of CodePen and add a few more features. But for now, I should rather work on the thing I wanted this for in the first place.