読了目安時間は約 2 分です。
ブレンドモードは、描画モードとしてPhotoshopやIllustratorなどのAdobe系ツールに搭載されている、グラフィックデザイナーにとってはおなじみの機能です。以前はPhotoshopなどで加工してからWebサイトに使用していましたが、現在はCSSで実装できるようになっています。今回はその方法をまとめましたので紹介します。動画にも使えますよ！
目次
使い方
乗算の場合は
mix-blend-mode: multiply;
スクリーンの場合は
mix-blend-mode: screen;
という具合に記述します。
類似
mix-blend-modeと似たものにbackground-blend-modeがあります。
mix-blend-modeはz-indexで上の要素に、background-blend-modeは背景に作用します。
ブレンドモードの一覧
| 通常 | normal |
| 乗算 | multiply |
| スクリーン | screen |
| オーバーレイ | overlay |
| 覆い焼き | color-dodge |
| 焼き込み | color-burn |
| 比較（暗） | darken |
| 比較（明） | lighten |
| ハードライト | hard-light |
| ソフトライト | soft-light |
| 差の絶対値 | difference |
| 除外 | exclusion |
| 色相 | hue |
| 彩度 | saturation |
| カラー | color |
| 輝度 | luminosity |
応用
- 文字と画像
- 画像同士（写真とテクスチャ）
- 画像とグラデーション
- 動画にも使える
など、PhotoshopやIllustratorなどでできることはだいたい再現できます。
