ブレンドモード一覧

Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんで

ブレンドモード一覧

基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。

1234	`body {` `background:` `#0bdurl(beach-footprint.jpg)` `no-repeat;` `background-blend-mode:` `screen;}`

こんな感じ。

それではこちらの海の画像に、それぞれのブレンドモードで青を重ねるとどうなるか見てみましょう。

画像＋画像

複数の画像を重ねて、どのように表示できるのか見てみましょう。組み合わせによってはすべてが見づらくなるので、画像選びは入念に。画像を組み合わせるには、background プロパティで複数の画像をカンマで区切って指定します。

CodePen Embed - CSS blend mode: multiple images

ドットやライン、テクスチャ画像と組み合わせてもおもしろいですね！

CodePen Embed - CSS blend mode: multiple images 2

画像＋グラデーション

以前「美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！」という記事で背景画像とグラデーションを組み合わせた例を紹介しました。それだけでも素敵ですが、さらにブレンドモードと組み合わせて、ひと味違った表現をしてみましょう！

カラフルなグラデーション

ここでは screen というブレンドモードを採用。青から赤という少しきつい印象のグラデーションですが、ブレンドモード次第で優しい雰囲気に。

CodePen Embed - CSS blend mode: gradation colour

画像の内側にシャドウをプラス

画像の端から中心にかけて、黒から透明の円型グラデーションを組み合わせ。Photoshopでいう「シャドウ（内側）」に似た表現ができます。

CodePen Embed - CSS blend mode: radial gradation colour

画像＋アニメーション

さらにアニメーションもプラスしてみましょう！過去記事「CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう」の例でも取り上げたCSSで表現する色の移り変わりアニメーションをブレンドモードで重ねています。
アニメーションがうまく表示されない方は、でも画面右下の「RETURN」または右上「Edit on CODEPEN」をクリックしてみてください。