Webデザインで「この画像に色を重ねたい」「テキストにテクスチャを入れたい」と思ったことはありませんか？CSSのmix-blend-modeプロパティを使えば、PhotoshopやIllustratorのようなブレンド効果を、簡単にWebサイトに実装できます。
この記事では、CSS初心者の方にもわかりやすく、mix-blend-modeの基本から実践的な使い方まで徹底解説します。
ブレンドモードとは？
ブレンドモードとは、複数の色やレイヤーを重ねたときに、どのように混ぜ合わせるかを決める計算方法のことです。
例えば、赤い四角の上に青い四角を重ねたとき：
- 通常モード：青い四角がそのまま表示される
- ブレンドモード：赤と青が混ざり合って、紫やその他の色になる
この「混ざり合い方」を変えることで、光の効果や影、色調補正など、さまざまな視覚効果を作り出せます。
CSSのmix-blend-modeとは
mix-blend-modeは、HTML要素に対してブレンドモードを適用できるCSSプロパティです。
画像編集ソフトのブレンドモード機能を、コードだけで実現できるため、以下のようなメリットがあります：
- 画像編集ソフトを使わずに効果を適用できる
- ホバーエフェクトなど、動的な効果を簡単に作れる
- 画像ファイルを増やさずに済むため、ページの読み込み速度が向上
- メンテナンスが容易
基本的な使い方
mix-blend-modeの基本的な記述方法は非常にシンプルです。
.element {
mix-blend-mode: multiply;
}
たったこれだけで、要素に対してブレンド効果を適用できます。
HTMLとCSSの例
<div class="container">
<div class="background">背景要素</div>
<div class="overlay">重ねる要素</div>
</div>
.container {
position: relative;
}
.background {
background: #ff6b6b;
padding: 50px;
}
.overlay {
position: absolute;
top: 20px;
left: 20px;
background: #4ecdc4;
padding: 30px;
mix-blend-mode: multiply; /* ここでブレンドモードを指定 */
}
mix-blend-modeの全15種類を解説
mix-blend-modeには15種類の値があります。それぞれの特徴と使いどころを見ていきましょう。
1. normal（通常）
mix-blend-mode: normal;
デフォルトの状態。ブレンド効果なしで、要素がそのまま表示されます。
使いどころ：ブレンドモードをリセットしたいとき
2. multiply（乗算）
mix-blend-mode: multiply;
色を掛け合わせて暗くする効果。白は透明になり、黒は黒のまま残ります。
使いどころ：影やダークな雰囲気を作りたいとき、テクスチャを自然に重ねたいとき
3. screen（スクリーン）
mix-blend-mode: screen;
色を明るくする効果。黒は透明になり、白は白のまま残ります。multiplyの逆です。
使いどころ：光の効果、明るい雰囲気を作りたいとき
4. overlay（オーバーレイ）
mix-blend-mode: overlay;
明るい部分はより明るく、暗い部分はより暗くしてコントラストを強調します。
使いどころ：写真に色を重ねてビビッドな印象を出したいとき
5. darken（比較（暗））
mix-blend-mode: darken;
2つの色を比較して、暗い方の色を表示します。
使いどころ：暗い色だけを残したいとき
6. lighten（比較（明））
mix-blend-mode: lighten;
2つの色を比較して、明るい方の色を表示します。
使いどころ：明るい色だけを残したいとき
7. color-dodge（覆い焼きカラー）
mix-blend-mode: color-dodge;
背景色を明るくし、鮮やかにします。強い光の効果を作れます。
使いどころ：グロー効果、強い光の表現
8. color-burn（焼き込みカラー）
mix-blend-mode: color-burn;
背景色を暗くし、コントラストを高めます。
使いどころ：深みのある色合い、ビンテージ風の表現
9. hard-light（ハードライト）
mix-blend-mode: hard-light;
強いコントラストを作ります。overlayに似ていますが、より強い効果です。
使いどころ：強い光の効果、劇的な表現
10. soft-light（ソフトライト）
mix-blend-mode: soft-light;
柔らかいコントラストを作ります。hard-lightより控えめな効果です。
使いどころ：自然な光の効果、柔らかい雰囲気
11. difference（差の絶対値）
mix-blend-mode: difference;
2つの色の差を計算して、色を反転させます。
使いどころ：背景色に関わらず見えるテキスト、サイケデリックな効果
12. exclusion（除外）
mix-blend-mode: exclusion;
differenceに似ていますが、コントラストが低く柔らかい反転効果です。
使いどころ：differenceより控えめな反転効果が欲しいとき
13. hue（色相）
mix-blend-mode: hue;
上の要素の色相を、下の要素の彩度と輝度と組み合わせます。
使いどころ：色だけを変えたいとき
14. saturation（彩度）
mix-blend-mode: saturation;
上の要素の彩度を、下の要素の色相と輝度と組み合わせます。
使いどころ：鮮やかさだけを変えたいとき
15. color（カラー）
mix-blend-mode: color;
上の要素の色相と彩度を、下の要素の輝度と組み合わせます。
使いどころ：明るさを保ったまま色を変えたいとき
16. luminosity（輝度）
mix-blend-mode: luminosity;
上の要素の輝度を、下の要素の色相と彩度と組み合わせます。
使いどころ：明るさだけを変えたいとき
実践的な使用例【コピペOK】
実際のWebサイトで使える、実践的なコード例をご紹介します。
例1：画像に色を重ねる
<div class="image-container">
<img src="photo.jpg" alt="写真">
<div class="color-overlay"></div>
</div>
.image-container {
position: relative;
width: 100%;
}
.image-container img {
display: block;
width: 100%;
}
.color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ff6b6b;
mix-blend-mode: multiply;
}
例2：テキストにテクスチャを適用
<h1 class="textured-text">Beautiful Text</h1>
.textured-text {
font-size: 80px;
font-weight: bold;
background: url('texture.jpg') center/cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
mix-blend-mode: multiply;
}
例3：ホバーで色が変わるボタン
<button class="blend-button">
<span class="button-text">Hover Me</span>
<span class="button-overlay"></span>
</button>
.blend-button {
position: relative;
padding: 15px 30px;
background: #333;
color: white;
border: none;
cursor: pointer;
overflow: hidden;
}
.button-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #4ecdc4;
mix-blend-mode: screen;
opacity: 0;
transition: opacity 0.3s;
}
.blend-button:hover .button-overlay {
opacity: 1;
}
例4：背景色に関わらず見えるテキスト
.adaptive-text {
color: white;
mix-blend-mode: difference;
padding: 10px 20px;
}
このテキストは、背景が明るくても暗くても常に見えるようになります。
よくある質問とトラブルシューティング
Q1. ブレンドモードが効かない
原因：親要素にisolation: isolate;が設定されているか、要素の重なり順序が適切でない可能性があります。
解決策：
/* 親要素のisolationを確認 */
.parent {
isolation: auto; /* isolateになっていないか確認 */
}
/* z-indexを確認 */
.blend-element {
position: relative;
z-index: 1;
}
Q2. 特定の範囲だけでブレンドしたい
解決策：親要素にisolation: isolate;を設定すると、その内部だけでブレンド効果を適用できます。
.isolated-container {
isolation: isolate;
}
Q3. パフォーマンスが気になる
解決策：
- 必要な箇所だけに使用する
will-change: mix-blend-mode;を追加してブラウザに最適化のヒントを与える- アニメーションと組み合わせる場合は、GPU アクセラレーションを活用する
.blend-element {
mix-blend-mode: multiply;
will-change: mix-blend-mode;
}
Q4. 古いブラウザ対応はどうすればいい？
解決策：@supportsを使って、ブレンドモード対応ブラウザだけに適用します。
@supports (mix-blend-mode: multiply) {
.blend-element {
mix-blend-mode: multiply;
}
}
/* フォールバック */
@supports not (mix-blend-mode: multiply) {
.blend-element {
opacity: 0.7; /* 代替スタイル */
}
}
関連プロパティ
background-blend-mode
背景画像と背景色をブレンドするプロパティです。
.element {
background-image: url('pattern.png');
background-color: #ff6b6b;
background-blend-mode: multiply;
}
isolation
新しい積み重ね順序を作成し、ブレンド効果を特定の範囲に限定します。
.container {
isolation: isolate;
}
まとめ
mix-blend-modeを使えば、CSSだけで高度な視覚効果を実現できます。
この記事のポイント：
mix-blend-modeは要素同士をどう混ぜるかを指定するCSSプロパティ- 全15種類のモードがあり、それぞれ異なる効果を持つ
- multiply（暗く）、screen（明るく）、overlay（コントラスト強調）が特によく使われる
- 画像編集ソフトを使わずに、動的な効果を作れる
isolationプロパティで効果の範囲をコントロールできる
まずは簡単な例から試してみて、少しずつ複雑な表現に挑戦してみてください。実際に手を動かすことが、ブレンドモードを理解する一番の近道です。
CodePenなどのオンラインエディタで、さまざまな値を試しながら、自分だけのオリジナルデザインを作ってみましょう！
