CSSでグラデーションに透明色を使う方法

写真を背景にしたWEBサイトで、写真の一部だけを暗くしたり、端に向かって色を消したりしたいことがあります。そんなときは、CSSのグラデーションに透明度を指定すると、元の写真を残しながら色を重ねられます。重要なのは「透明な色」と「色の付いた背景」をどう重ねるかです。透明度の書き方から、背景写真への重ね方、文字の読みやすさまで順に説明します。

グラデーションの透明色はどう指定する？

CSS（WEBページの見た目を指定するルール）のlinear-gradient()は、直線に沿って色が変わる背景画像を作る関数です。色の一つひとつにアルファ値（不透明度）を付けると、色が薄くなった部分から下の背景を見せられます。アルファ値は0が完全透明、1が不透明で、0.5なら半透明です。

たとえばrgb(16 35 56 / 0.95)は濃紺■#102338を95%の不透明度で表示し、rgb(16 35 56 / 0)は同じ濃紺を完全に透明にします。従来のrgba(16, 35, 56, 0.95)でも同じ色と透明度を指定できます。transparentも完全透明を表しますが、どの色を薄くするか明確にしたい場合は、同じRGB値でアルファだけを変える書き方が分かりやすいです。現在のCSS仕様では透明色もアルファを考慮して補間されますが、古い表示環境では結果が異なる場合があります。

opacity: 0.5を要素全体に指定すると、その中の文字やボタンも一緒に半透明になります。一方、background-imageに指定したグラデーションの各色だけを半透明にすれば、文字やボタンそのものの不透明度は変えずに背景を調整できます。グラデーションはCSS上では画像なので、background-colorには指定しません。

夜景写真に濃紺を重ね、右側へ透明にする例

夜の街並みを使った写真講座の案内バナーを考えます。左側には濃紺■#102338を強めに重ね、中央で薄くし、右端に近づくにつれて写真がそのまま見えるようにします。写真の明るい看板や街灯を残しながら、左側の情報エリアを落ち着かせることを狙った配色です。

<section class="night-hero">
  <div class="night-hero__panel">
    <h2>街の光を撮る写真講座</h2>
    <p>開催日と持ち物を、まとめて確認できます。</p>
    <a class="night-hero__link" href="/events/">開催概要を見る</a>
  </div>
</section>

.night-hero {
  display: flex;
  align-items: center;
  min-height: 340px;
  padding: clamp(24px, 5vw, 48px);
  background-color: rgb(16 35 56);
  background-image:
    linear-gradient(
      to right,
      rgb(16 35 56 / 0.95) 0%,
      rgb(16 35 56 / 0.55) 48%,
      rgb(16 35 56 / 0) 85%
    ),
    url("/images/night-street.jpg");
  background-size: cover, cover;
  background-position: center, center;
}
.night-hero__panel {
  max-width: 420px;
  padding: 24px;
  border-radius: 12px;
  background-color: rgb(255 255 255);
  color: rgb(33 48 67);
}
.night-hero__link {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 6px;
  background-color: rgb(27 75 110);
  color: rgb(255 255 255);
  text-decoration: underline;
}
.night-hero__link:hover {
  background-color: rgb(20 57 87);
}
.night-hero__link:focus-visible {
  outline: 3px solid rgb(16 35 56);
  outline-offset: 3px;
}

background-imageで最初に書いたlinear-gradient()が手前、後に書いたurl()の写真が奥です。0%地点の不透明度は95%、48%地点は55%、85%地点は0%です。最後の部分では写真の色が見えます。background-colorに濃紺■#102338を用意しているのは、写真を読み込めない場合の背景色にもするためです。画像パス/images/night-street.jpgとリンク先/events/は例示なので、実際のファイルとページに置き換えてください。

文字は写真の上に直接載せず、白■#FFFFFFの不透明なパネルにまとめます。文字は濃い青灰色■#213043、案内リンクは青■#1B4B6Eの背景に白文字■#FFFFFFを合わせます。装飾のグラデーションと情報を載せる面を分けることで、写真が変わっても文字の背景色を固定できます。

透け方とコントラストを確認するポイント

写真をもっと見せたい場合は、透明になる位置を左へ寄せたり、0.95を小さくしたりします。ただし、グラデーションの重ね順を逆にして写真を先に書くと、不透明な写真が上に来て色の重なりが見えなくなることがあります。background-size: coverは写真を領域に合わせて拡大・切り抜きする指定なので、スマートフォンでも写真の被写体と明暗を確認しましょう。

文字と背景のコントラスト比は、白いパネル■#FFFFFFと濃い青灰色の文字■#213043で約13.39:1です。白文字■#FFFFFFと通常の青ボタン■#1B4B6Eは約9.22:1、ホバー時の濃い青■#143957とは約11.98:1です。いずれもWCAG 2.2が通常サイズの文字に求める4.5:1を上回ります。キーボード操作時の濃紺の枠線■#102338と白いパネル■#FFFFFFも約15.91:1で、重要な操作表示の非テキストコントラスト目安3:1を上回ります。

これは不透明なパネル内での確認結果であり、写真と半透明グラデーションが合成された背景上の文字を保証する数値ではありません。文字を直接写真に置くと、場所や画像の変更に応じてコントラストを測り直す必要があります。また、透明度で写真を見せる指定は、背景の色同士を特定の合成方法で混ぜるbackground-blend-modeとは別の仕組みです。HueRollで元になる色候補や選択色と白・黒の比率は確認できますが、写真に重ねた透明グラデーションのコントラストを自動判定する機能ではありません。