ブレンドモードとは？

簡単にいうとPhotoshopやIllustratorで使うオーバーレイがなんとCSSでできちゃいます！

残念ながらSafariの一部、IE, Edgeはサポートしていないので実際に案件で使うことはまだ少ないかと思います。

参考：Can I use …

mix-blend-mode

こんな感じでcssで加工ができます。
例 ： 背景色　+　画像

※Chrome や Firefoxなど、対応ブラウザでご覧ください！

See the Pen XgMKGp by hitomi (@hitomi701) on CodePen.

backround-blend-mode

背景画像にも対応できます！

.blend-mode { 
  background:green url(images/img01.jpg) no-repeat;
  background-blend-mode: multiply; 
} 

背景画像のcssに設定するだけ。

今回はcolorとの組み合わせですが、画像に合わせた色の組み合わせ、画像と画像など色々やってみると楽しいです。

【参考サイト】

• MDN mix-blend-mode
• MDN background-blend-mode