CreaTools LogoCreaTools
Tech Notes
Gradient Maker

画像にグラデーションオーバーレイ｜透明度の目安と実装パターン

2025-09-18

:::note ※画像＋テキストの視認性を確保したいときの「UI設計用」記事です :::

結論（30秒で分かる要点）

  • 実装方法：background にグラデーションと画像を併記（グラデーションが先）
  • 透明度の目安：テキスト視認性確保なら 0.5〜0.6 から調整
  • 迷ったら：Gradient Maker でグラデーションの色を決めてから透明度を追加

💡 オーバーレイの色を視覚的に決めたい → Gradient Maker

よくある失敗（実務で踏む地雷）

❌ 失敗1：画像とグラデーションの記述順を間違える

/* ❌ 画像がグラデーションの上に来る */
.hero {
  background: 
    url('/hero.jpg') center/cover,
    linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}

/* ✅ グラデーションを先に書く（上に重なる） */
.hero {
  background: 
    linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)),
    url('/hero.jpg') center/cover;
}

CSS の background は先に書いたものが上に重なる。

❌ 失敗2：透明度が高すぎて画像が見えない

/* ❌ 0.9 は画像がほぼ隠れる */
.hero {
  background: 
    linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)),
    url('/hero.jpg') center/cover;
}

画像を背景に使う意味がなくなる。0.5〜0.6 から始めて調整する。

❌ 失敗3：疑似要素の pointer-events を忘れる

/* ❌ オーバーレイがクリックを吸収 */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(...);
}

/* ✅ クリックを透過させる */
.hero::after {
  pointer-events: none;
}

❌ 失敗4：テキストの視認性を確認せずに実装

画像は明るさがバラバラ。同じ透明度でも画像によって見え方が変わる。

対策：複数の画像でテストするか、十分に暗いグラデーションを使う。

基本：background の複数指定

.hero {
  background: 
    linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)),
    url('/hero.jpg') center/cover;
}
  • グラデーションを先に書く（上に重なる）
  • center/cover で画像をフルカバー

よくあるパターン

パターン1：下部を暗くする（テキスト配置用）

.hero {
  background: 
    linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%),
    url('/image.jpg') center/cover;
}

用途：画像の下部にテキストを配置する場合。

パターン2：全体をブランドカラーで覆う

.hero {
  background: 
    linear-gradient(135deg, rgba(102,126,234,0.8), rgba(118,75,162,0.8)),
    url('/image.jpg') center/cover;
}

用途：ブランドの統一感を出したい場合。

→ Generatorでグラデーションの色を調整

パターン3：デュオトーン風

.hero {
  background: 
    linear-gradient(to right, rgba(102,126,234,0.9), rgba(118,75,162,0.9)),
    url('/image.jpg') center/cover;
  filter: grayscale(100%);
  background-blend-mode: multiply;
}

用途：アート系サイト、印象的なビジュアル。

パターン4：上部から光が差す効果

.hero {
  background: 
    linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, transparent 30%),
    linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%),
    url('/image.jpg') center/cover;
}

用途：上部のナビゲーションと下部のテキスト両方を見やすく。

疑似要素を使う方法

画像とオーバーレイを分離したい場合：

.hero {
  position: relative;
  background: url('/hero.jpg') center/cover;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
  pointer-events: none; /* クリックを透過 */
}

.hero > .content {
  position: relative;
  z-index: 1; /* コンテンツを前面に */
}

メリット：

  • オーバーレイだけアニメーション可能
  • JSで動的に切り替えやすい

透明度の目安

用途透明度備考
うっすら暗くする0.2〜0.3画像がメイン
テキスト視認性確保0.5〜0.7最も使用頻度が高い
画像をほぼ隠す0.8〜0.9画像は雰囲気程度

迷ったら 0.5〜0.6 から始める。

具体例：このUIならこの設定

ケース1：ヒーローセクション（白テキスト）

.hero {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding: 48px;
  color: #fff;
  background: 
    linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%),
    url('/hero.jpg') center/cover;
}

ケース2：カード画像のホバーエフェクト

.card {
  position: relative;
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.card:hover::after {
  opacity: 1;
}

ケース3：Tailwindでの実装

<div class="relative bg-cover bg-center" style="background-image: url('/hero.jpg')">
  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/70"></div>
  <div class="relative z-10 p-8 text-white">
    テキスト
  </div>
</div>

ブラウザ対応

ブラウザ対応状況備考
Chrome✅全機能対応
Safari✅全機能対応
Firefox✅全機能対応
Edge✅全機能対応

background の複数指定は2025年現在、全モダンブラウザで問題なく動作。

まとめ：判断基準

条件推奨アプローチ
シンプルに重ねたいbackground 複数指定（推奨）
オーバーレイをアニメーション疑似要素で分離
透明度に迷ったら0.5〜0.6 から調整
グラデーションの色選びGradient Maker で視覚確認

この記事で解決しない場合