【CSS】linear-gradient と ブレンドモード（mix-blend-mode / background-blend-mode）
目次
CSS linear-gradient（線形グラデーション）の基本構文
- background: linear-gradient(direction, color-stop1, color-stop2, ...);
• direction（方向）
グラデーションの流れを指定。省略すると上から下（to bottom）。
• color-stop
色と位置（%やpxで指定可能）。位置を指定しない場合は自動で分配。
linear-gradient の方向指定方法
1. 角度で指定する方法
- linear-gradient(90deg, red, blue);
• 0deg → 上から下へ
• 90deg → 左から右へ
• 180deg → 下から上へ
• 270deg → 右から左へ
• 任意の角度（例: 45deg）で斜めにできる
2. toで指定する方法
- linear-gradient(to right, red, blue);
• to top → 下から上へ
• to right → 左から右へ
• to bottom → 上から下へ（デフォルト）
• to left → 右から左へ
• to top right → 左下から右上へ
• to bottom left → 右上から左下へ
よく使う書き方
1. 基本の上下グラデーション
- background: linear-gradient(to bottom, #ff7e5f, #feb47b);
2. 左右に流れるグラデーション
- background: linear-gradient(to right, #4facfe, #00f2fe);
3. 斜めに流れるグラデーション
- background: linear-gradient(45deg, #43e97b, #38f9d7);
4. 複数色を使う
- background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4, #fbc2eb);
5. カラーの位置を指定
- background: linear-gradient(to right, #f6d365 0%, #fda085 50%, #fbc2eb 100%);
6. 半透明カラーを使う（オーバーレイ用途）
- background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1));
7. グラデーションを繰り返す（repeating-linear-gradient）
- background: repeating-linear-gradient(
- 45deg,
- #606dbc,
- #606dbc 10px,
- #465298 10px,
- #465298 20px
- );
応用した記述方法
- background: linear-gradient(90deg, rgba(32,32,32,1) 30%, rgba(0,0,0,1) 70%);
30%までグレーが続き、70%以降は黒、真ん中で急に変わる。
ブレンドモード（Blend Modes）
CSSでは mix-blend-mode と background-blend-mode がある。
• mix-blend-mode: 要素自体を背景や他の要素とブレンド
• background-blend-mode: 背景画像やグラデーション同士をブレンド
主なブレンドモードと効果
1. normal（通常）
デフォルト。ブレンドせずそのまま表示。
2. multiply（乗算）
色が掛け合わされて暗くなる。写真の色を濃くしたいときに便利。
3. screen（スクリーン）
掛け合わせて明るくなる。光やハイライト演出に最適。
4. overlay（オーバーレイ）
multiplyとscreenを組み合わせ、暗い部分はより暗く、明るい部分はより明るく。コントラストが強調される。
5. darken / lighten
• darken → 2つの色のうち暗い方を採用
• lighten → 明るい方を採用
6. color-dodge / color-burn
• color-dodge → 下地を明るく強調（鮮やかになる）
• color-burn → 下地を暗く強調（濃くなる）
7. difference / exclusion
• difference → 色の差分を取り、反転効果のような見た目
• exclusion → differenceより柔らかい反転効果
8. hue / saturation / color / luminosity
• hue → 上の要素の色相を使い、彩度と明度は下地に合わせる
• saturation → 彩度だけ上の要素を適用
• color → 色（色相＋彩度）を上から適用し、明度は下地
• luminosity → 明度だけ上から適用
実用例
1. 背景画像とグラデーションを重ねる
- background:
- linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
- url("image.jpg");
- background-blend-mode: multiply;
写真が暗くなり、文字が読みやすくなる。
2. テキストをブレンドする
- .text {
- mix-blend-mode: screen;
- }
テキストが背景と光のように馴染む。
3. カラフルなオーバーレイ
- .overlay {
- background: linear-gradient(45deg, red, blue);
- mix-blend-mode: overlay;
- }
