こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webデザインをしていると、「テキストや画像を背景になじませたい」と思うことがありますよね？
そんなときに便利なのが CSSの mix-blend-mode です！
例えば、以下のような表現が可能になります。
- 画像の色を背景に溶け込ませる
- テキストを背景の色と混ぜておしゃれに見せる
- 画像の色を変えずに透明感のあるデザインを作る
この記事では mix-blend-mode の基本的な使い方から応用テクニックまで わかりやすく解説します！
mix-blend-modeとは？
mix-blend-mode は、要素の描画方法を変更して、背景や隣接する要素と色を混ぜ合わせるCSSプロパティ です。
例えば、以下のような指定をすると、テキストの色が背景と混ざります。
.text { mix-blend-mode: multiply; }
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この指定により、 .text の要素は背景と「乗算（multiply）」の効果でブレンドされます。
mix-blend-modeの種類一覧
mix-blend-mode には、以下のようなブレンドモードがあります。
- normal（通常）
- multiply（乗算）
- screen（スクリーン）
- overlay（オーバーレイ）
- darken（暗くする）
- lighten（明るくする）
- color-dodge（覆い焼き）
- color-burn（焼き込み）
- hard-light（ハードライト）
- soft-light（ソフトライト）
- difference（差の絶対値）
- exclusion（排他的）
- hue（色相）
- saturation（彩度）
- color（カラー）
- luminosity（輝度）
各ブレンドモードの具体例
1. multiply（乗算）
重なった部分が暗くなる効果です。背景の色が反映され、画像やテキストが自然に馴染みます。
.text { mix-blend-mode: multiply; } 2. screen（スクリーン）
重なった部分が明るくなる効果 です。multiply とは逆の効果を持ちます。
.text { mix-blend-mode: screen; } 3. overlay（オーバーレイ）
暗い部分はより暗く、明るい部分はより明るくなる効果 です。
.text { mix-blend-mode: overlay; } 4. difference（差の絶対値）
背景色と要素の色の差を強調 するモードです。
.text { mix-blend-mode: difference; } 実践！おしゃれなデザインを作る
背景になじむテキストを作る
以下のコードを使うと、背景画像と馴染むテキストを作れます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ブラウザ対応
mix-blend-mode は 主要なモダンブラウザ（Chrome, Edge, Firefox, Safari, Opera）でサポート されていますが、一部の古いバージョンでは未対応の場合があります。
まとめ
- mix-blend-mode を使うと 背景と要素を自然に馴染ませるデザイン ができる
- 乗算（multiply）、スクリーン（screen）、オーバーレイ（overlay）など、用途に応じたモードを選ぶ
- 画像やテキストのブレンドを活用すると、おしゃれなWebデザインが簡単に実装 できる
- 主要ブラウザでサポートされているが、IEなど古いブラウザでは対応していない
mix-blend-mode を活用して、より魅力的なWebデザインを作ってみてください！
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
