こんにちは、デザイナーだけどFigmaよりTypeScriptを触っている時間のほうが長いid:ymrl です。 この記事はfreee Developers Advent Calendarの2日目です。 CSSの mix-blend-mode 、なんだかカッコいい見た目のものを作るのに便利そうとずっと思っていたものの、 mix-blend-mode に何を指定したらどうなるのか想像しづらく、私は「当てずっぽうでいろんな値を入れてみていい感じになったのを使う」みたいな状態でずっと誤魔化していました。 なにせ MDNのmix-blend-modeのページに載っているサンプルがこれですよ。 MDNに載っているサンプル(MDNのmix-blend-modeのページより引用) これだけ見てもよくわからない! ということで、それぞれの blend-mode の値のときの色の計算方法を調べて、自分で計算
![CSSのmix-blend-mode完全に理解したい - freee Developers Hub](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a5f6c5ce562ddca8c4f5b958c2e8aa5612e7ffd/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fy%2Fymrl%2F20221130%2F20221130145316.png)