ミックスブレンドモード早見表【XDデザイン → CSS】

ミックスブレンドモードの指定をXDデザインから、CSSに変換するのに毎回調べてるな。
使いやすい一覧表ほしいな。

しんぺー

XD to CSSの一覧を作成しました。
一応CSS反映時のサンプルも用意しているので、ブレンドの結果がどんな雰囲気になるか確認できると思います。

この2つの画像をミックスします

ミックスする画像はこちらです。
グラデーションのやつも画像です。疑似要素でCSSで再現するのも良いと思います。

ミックスブレンドモード一覧

XDでの名称とCSSの名称を一覧にしました。
コーディング時はこの一覧だけあれば大丈夫ですね。

ほかにもどんな効果があるのか気になる方は、すべての効果の反映結果を用意しましたのでどうぞ。

Adobe XD CSS
比較(暗) mix-blend-mode: darken;
乗算 mix-blend-mode: multiply;
焼き込みカラー mix-blend-mode: color-burn;
比較(明) mix-blend-mode: lighten;
スクリーン mix-blend-mode: screen;
覆い焼きカラー mix-blend-mode: color-dodge;
オーバーレイ mix-blend-mode: overlay;
ソフトライト mix-blend-mode: soft-light;
ハードライト mix-blend-mode: hard-light;
差異 mix-blend-mode: difference;
除外 mix-blend-mode: exclusion;
色相 mix-blend-mode: hue;
彩度 mix-blend-mode: saturation;
カラー mix-blend-mode: color;
輝度 mix-blend-mode: luminosity;

比較(暗)

mix-blend-mode: darken;

乗算

mix-blend-mode: multiply;

焼き込みカラー

mix-blend-mode: color-burn;

比較(明)

mix-blend-mode: lighten;

スクリーン

mix-blend-mode: screen;

覆い焼きカラー

mix-blend-mode: color-dodge;

オーバーレイ

mix-blend-mode: overlay;

ソフトライト

mix-blend-mode: soft-light;

ハードライト

mix-blend-mode: hard-light;

差異

mix-blend-mode: difference;

除外

mix-blend-mode: exclusion;

色相

mix-blend-mode: hue;

彩度

mix-blend-mode: saturation;

カラー

mix-blend-mode: color;

輝度

mix-blend-mode: luminosity;

CodePenで確認したい方はこちらからどうぞ

CodePenでも作成しましたので、こちらの方が見やすい方はどうぞ。

See the Pen mix-blend-mode by shimpei (@shimpei) on CodePen.