MENU
  1. ホーム
  2. CSS
  3. 【CSS】linear-gradientの使い方：文字や枠線・画像への重ね方

【CSS】linear-gradientの使い方：文字や枠線・画像への重ね方

CSS
css-linear-gradient
ポートフォリオ向けサーバー
HTML/CSSスキルが活きる！
学んだ知識を活かして、
自分だけのブログを始めませんか？

WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。

ブログ向けサーバー4選を見る

CSSのlinear-gradientは、背景からテキスト、枠線まで、Webデザインをリッチに彩る必須のグラデーション関数です。

本記事では、基本となる方向や角度の指定、文字への適用、ホバーアニメーションの実装、「効かない」時の解決策まで解説します。

HTML/CSS学習者の方へ
「学んだコード、自分のブログで試してみませんか？」
多くのブロガーがデザインでつまずく中、コードが読めるあなたは圧倒的に有利です。
自由自在なサイト構築の第一歩となる、初心者向けサーバーを分かりやすく比較しました。

＼ スキルを活かして情報発信 ／ ブログ向けレンタルサーバー4選を読む▶︎
目次

linear-gradientとは：書き方と方向の指定

Webサイトのデザインにおいて、要素の背景を単色ではなく、複数の色が滑らかに移り変わるグラデーションで表現したい場面は多々あります。

このグラデーションを実現するCSS関数がlinear-gradient（線形グラデーション）です。

linear-gradientを一言で説明すると、指定した方向に沿って2つ以上の色を直線的にブレンドする機能です。

ここでは、linear-gradientの使い方、特定のlinear-gradientの挙動、linear-gradientの実践的なサンプルコードを利用して解説します。

linear-gradientとは：書き方と方向の指定
  • 上下左右や斜めの方向指定
  • 角度によるコントロール
  • 色が変わる位置とくっきり分けるハードストップ

上下左右や斜めの方向指定

グラデーションを作る際、最初に決めるのが方向です。

方向はto right（右へ）やto bottom（下へ）といったキーワードを使って指定します。

  • linear-gradient horizontal（水平）: to right（左から右へ）または to left
  • linear-gradient vertical（垂直）: to bottom（上から下へ）または to top
  • linear-gradient diagonal（斜め）: to bottom right（左上から右下へ）など

方向指定では、「background-image（または一括指定のbackground）に対して使用し、方向指定には現代の標準構文である『to 〇〇（目的地）』を記述すること」です。

⭕️ 方向は「目的地」を指定する！to right なら左から右へ！

to right
（css linear gradient to right）

to bottom
（css linear gradient to bottom）

to bottom right
（css linear gradient top left to bottom right）

/* ❌ 罠：background-color に指定するとグラデーションは効かない！ */
.box-fail {
  background-color: linear-gradient(to right, red, blue); /* 🚨 エラーで透明になる */
}

/* ⭕️ background または background-image に指定し、「to 目的地」で書く！ */
.is-to-right {
  background-image: linear-gradient(to right, #0d6efd, #20c997);
}
.is-to-bottom-right {
  background-image: linear-gradient(to bottom right, #fd7e14, #ffc107);
}
HTMLコード表示
<div class="grad-dir-wrapper">
  
  <p class="grad-dir-caption">⭕️ 方向は「目的地」を指定する！to right なら左から右へ！</p>

  <div class="grad-dir-demo-area">
    
    <div class="dir-box is-to-right">
      <p class="dir-label">to right<br>（css linear gradient to right）</p>
    </div>

    <div class="dir-box is-to-bottom">
      <p class="dir-label">to bottom<br>（css linear gradient to bottom）</p>
    </div>

    <div class="dir-box is-to-bottom-right">
      <p class="dir-label">to bottom right<br>（css linear gradient top left to bottom right）</p>
    </div>

  </div>

  <div class="grad-dir-code-area">
    <span class="hl-comment">/* ❌ 罠：background-color に指定するとグラデーションは効かない！ */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">background-color:</span> <span class="hl-red">linear-gradient(to right, red, blue);</span> <span class="hl-comment">/* 🚨 エラーで透明になる */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ background または background-image に指定し、「to 目的地」で書く！ */</span><br>
    <span class="hl-blue">.is-to-right</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, #0d6efd, #20c997);</span><br>
    }<br>
    <span class="hl-blue">.is-to-bottom-right</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to bottom right, #fd7e14, #ffc107);</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-dir-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-dir-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-dir-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  justify-content: center;
}

.dir-box {
  width: 200px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.dir-label {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  margin: 0;
  line-height: 1.5;
}

/* ＝＝＝ 💡 グラデーションの方向指定 ＝＝＝ */
.is-to-right {
  /* css linear gradient left to right */
  background-image: linear-gradient(to right, #0d6efd, #20c997);
}

.is-to-bottom {
  /* css linear gradient top to bottom */
  /* css linear gradient to top（下から上）の逆 */
  background-image: linear-gradient(to bottom, #6f42c1, #d63384);
}

.is-to-bottom-right {
  /* 斜めのグラデーション */
  background-image: linear-gradient(to bottom right, #fd7e14, #ffc107);
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-dir-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

角度によるコントロール

to rightやto bottomといったキーワード指定は直感的で便利ですが、実務のデザインデータでは「135度」や「45度」といった厳密な角度が指定されていることがほとんどです。

そのような場合は、degを使用してグラデーションの角度を直接数値でコントロールします。

角度と文字グラデーションを扱う際は、「Figmaなどのデザインツールから角度（deg）の数値をそのままコピペして指定すること」です。

文字をグラデーションにする際は、background-clip: text;とcolor: transparent;（または -webkit-text-fill-color: transparent;）をセットで記述し、文字自体を透明に抜くことです。

⭕️ デザイン通りの角度（deg）指定と、絶対に黒潰れさせない文字グラデーション！

135deg の角度指定
（斜め右下方向）

Gradient Text Styling

テキスト自体が透明になり、背後のグラデーションが透けて見えています。

/* ❌ 罠：文字グラデーションで「文字色を透明」にし忘れる */
.text-fail {
  background-image: linear-gradient(90deg, #0d6efd, #20c997);
  -webkit-background-clip: text;
  /* 🚨 color: transparent; がないため、文字が黒いまま背景を覆い隠してしまう！ */
}

/* ⭕️ 角度（deg）指定と、文字グラデーションの必須セット */
.gradient-text-success {
  /* 💡 1. 90deg（左から右）のグラデーション背景を敷く */
  background-image: linear-gradient(90deg, #fd7e14, #d63384);
  /* 💡 2. 背景を文字の形に切り抜く */
  -webkit-background-clip: text;
  /* 💡 3. 文字自体の色を透明にして、背景を透けさせる！ */
  color: transparent;
}
HTMLコード表示
<div class="grad-deg-wrapper">
  
  <p class="grad-deg-caption">⭕️ デザイン通りの角度（deg）指定と、絶対に黒潰れさせない文字グラデーション！</p>

  <div class="grad-deg-demo-area">
    
    <div class="deg-box">
      <p class="deg-label">135deg の角度指定<br>（斜め右下方向）</p>
    </div>

    <div class="deg-text-box">
      <div class="gradient-text">Gradient Text Styling</div>
      <p class="deg-text-desc">テキスト自体が透明になり、背後のグラデーションが透けて見えています。</p>
    </div>

  </div>

  <div class="grad-deg-code-area">
    <span class="hl-comment">/* ❌ 罠：文字グラデーションで「文字色を透明」にし忘れる */</span><br>
    <span class="hl-blue">.text-fail</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(90deg, #0d6efd, #20c997);</span><br>
      <span class="hl-green">-webkit-background-clip:</span> <span class="hl-red">text;</span><br>
      <span class="hl-comment">/* 🚨 color: transparent; がないため、文字が黒いまま背景を覆い隠してしまう！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 角度（deg）指定と、文字グラデーションの必須セット */</span><br>
    <span class="hl-blue">.gradient-text-success</span> {<br>
      <span class="hl-comment">/* 💡 1. 90deg（左から右）のグラデーション背景を敷く */</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(90deg, #fd7e14, #d63384);</span><br>
      <span class="hl-comment">/* 💡 2. 背景を文字の形に切り抜く */</span><br>
      <span class="hl-green">-webkit-background-clip:</span> <span class="hl-red">text;</span><br>
      <span class="hl-comment">/* 💡 3. 文字自体の色を透明にして、背景を透けさせる！ */</span><br>
      <span class="hl-green">color:</span> <span class="hl-red">transparent;</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-deg-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-deg-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-deg-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

/* ＝＝＝ 💡 角度（deg）指定のボックス ＝＝＝ */
.deg-box {
  width: 220px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  
  /* 135度は斜め右下に向かう角度 */
  background-image: linear-gradient(135deg, #6f42c1, #0dcaf0);
}

.deg-label {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  margin: 0;
  line-height: 1.5;
}

/* ＝＝＝ 💡 文字グラデーション（黒潰れ回避） ＝＝＝ */
.deg-text-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  max-width: 300px;
}

.gradient-text {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: bold;
  
  /* 1. グラデーション背景を敷く（90degは左から右） */
  background-image: linear-gradient(90deg, #fd7e14, #d63384, #6f42c1);
  
  /* 2. 背景をテキストの形でクリッピング（切り抜き）する */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* 3. 🚨ここが超重要：文字自体を透明にしないと真っ黒になる！ */
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.deg-text-desc {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-deg-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

色が変わる位置とくっきり分けるハードストップ

グラデーションはただ色が混ざるだけでなく、カラーストップを指定することで「どの位置からどの色が始まるか」を自在にコントロールできます。

通常はlinear-gradient(to right, red 20%, blue 80%)のように記述します。

背景色をくっきりと分割するには、「隣り合う2つの色のカラーストップ（%）を『全く同じ数値』に設定して、グラデーションの境界線を潰す（ハードストップを作る）こと」です。

これにより、単一の要素で美しいストライプやバイカラー背景を構築できます。

⭕️ 同じ数値を並べるとグラデーションが消え、くっきり分かれる（ハードストップ）！

50%から混ざる
（ソフトストップ）

50%でくっきり分割
（ハードストップ）

/* ⭕️ 通常のグラデーション（真ん中から混ざり始める） */
.soft-stop {
  /* 💡 オレンジは50%まで単色。そこからピンクに向かって混ざり始める */
  background-image: linear-gradient(to right, orange 50%, pink 100%);
}

/* ⭕️ 数値を同じにすると「くっきり分かれる（ハードストップ）」！ */
.hard-stop {
  /* 💡 オレンジが50%で終わり、ピンクも50%から始まる ＝ 混ざるスキマがない！ */
  background-image: linear-gradient(to right, orange 50%, pink 50%);
}
HTMLコード表示
<div class="grad-stop-wrapper">
  
  <p class="grad-stop-caption">⭕️ 同じ数値を並べるとグラデーションが消え、くっきり分かれる（ハードストップ）！</p>

  <div class="grad-stop-demo-area">
    
    <div class="stop-box is-soft-stop">
      <p class="stop-label">50%から混ざる<br>（ソフトストップ）</p>
    </div>

    <div class="stop-box is-hard-stop">
      <p class="stop-label">50%でくっきり分割<br>（ハードストップ）</p>
    </div>

  </div>

  <div class="grad-stop-code-area">
    <span class="hl-comment">/* ⭕️ 通常のグラデーション（真ん中から混ざり始める） */</span><br>
    <span class="hl-blue">.soft-stop</span> {<br>
      <span class="hl-comment">/* 💡 オレンジは50%まで単色。そこからピンクに向かって混ざり始める */</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, orange 50%, pink 100%);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 数値を同じにすると「くっきり分かれる（ハードストップ）」！ */</span><br>
    <span class="hl-blue">.hard-stop</span> {<br>
      <span class="hl-comment">/* 💡 オレンジが50%で終わり、ピンクも50%から始まる ＝ 混ざるスキマがない！ */</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, orange 50%, pink 50%);</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-stop-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-stop-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-stop-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.stop-box {
  width: 220px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border: 1px solid #ced4da;
}

.stop-label {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
  margin: 0;
  line-height: 1.5;
  background-color: rgba(0,0,0,0.3);
  padding: 5px 10px;
  border-radius: 4px;
}

/* ＝＝＝ 💡 1. ソフトストップ（色が混ざる） ＝＝＝ */
.is-soft-stop {
  /* 0%〜50%は濃い青の単色。50%の位置から初めて水色へとグラデーションが開始される */
  background-image: linear-gradient(to right, #0d6efd 50%, #0dcaf0 100%);
}

/* ＝＝＝ 💡 2. ハードストップ（くっきり分かれる） ＝＝＝ */
.is-hard-stop {
  /* 濃い青が50%で終了し、水色も全く同じ50%から開始される。混ざる隙間がないためくっきり分かれる */
  background-image: linear-gradient(to right, #0d6efd 50%, #0dcaf0 50%);
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-stop-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

透明度と3色以上の美しいグラデーション

Webサイトをモダンで洗練されたデザインにするために欠かせないのがlinear-gradientと色の高度な組み合わせです。

単なる2色のベタ塗りから、透明度を利用した写真との合成や配色の組み合わせを用いた3色以上の表現をマスターすることで、デザインの幅は広がります。

ここでは、linear-gradientにおける16進数カラーコードやrgbaを駆使して、実務で頻出する「半透明グラデーション」と「多色グラデーション」の作り方を解説します。

透明度と3色以上の美しいグラデーション
  • rgbaやtransparentを使った透明・半透明の指定
  • 3色以上を組み合わせる方法

rgbaやtransparentを使った透明・半透明の指定

実務において「背景画像の上にテキストを置きたいけれど、写真が明るすぎて文字が読めない」というケースは頻繁に発生します。

この問題を解決するベストプラクティスが背景画像と半透明グラデーションの重ね合わせです。

グラデーションの中で透明を表現するには、色の値にtransparentを指定するか、rgba(0, 0, 0, 0.5)や16進数のアルファ値（#00000080）を用いて透明度付きのグラデーションを作成します。

半透明グラデーションを実装するには、「opacityプロパティは使わず、background-imageの中で『rgba』を用いて背景の『色自体』に透明度を持たせること」です。

黒ずみを防ぐために 「transparentではなくrgba(0,0,0,0)のように同系色の透明度0%を指定すること」 です。

⭕️ テキストはくっきり見せたまま、背景だけを半透明のグラデーションで暗くする！

❌ 罠（opacityプロパティを使用）

背景と一緒に文字まで半透明になり、非常に読みづらいです。

⭕️ 成功（rgbaによる透明度指定）

文字は不透明度100%でくっきり見え、背景だけが美しく透けています。（css background linear gradient transparent）

/* ❌ 罠：要素全体を半透明にしてしまう */
.box-fail {
  background-image: linear-gradient(to right, #000, #333);
  opacity: 0.5; /* 🚨 中の文字まで薄くなってしまう致命的なミス！ */
}

/* ⭕️ 背景色そのもの（rgba）に透明度を持たせる！ */
.box-success {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8), /* 💡 上は黒の不透明度80% */
    rgba(0, 0, 0, 0) /* 💡 下は黒の不透明度0%（黒ずみ回避の完全透明） */
  ), url(“背景画像.jpg”);
}
HTMLコード表示
<div class="grad-trans-wrapper">
  
  <p class="grad-trans-caption">⭕️ テキストはくっきり見せたまま、背景だけを半透明のグラデーションで暗くする！</p>

  <div class="grad-trans-demo-area">
    
    <div class="trans-box is-trap-opacity">
      <div class="trans-title">❌ 罠（opacityプロパティを使用）</div>
      <p class="trans-text">背景と一緒に文字まで半透明になり、非常に読みづらいです。</p>
    </div>

    <div class="trans-box is-success-rgba">
      <div class="trans-title">⭕️ 成功（rgbaによる透明度指定）</div>
      <p class="trans-text">文字は不透明度100%でくっきり見え、背景だけが美しく透けています。（css background linear gradient transparent）</p>
    </div>

  </div>

  <div class="grad-trans-code-area">
    <span class="hl-comment">/* ❌ 罠：要素全体を半透明にしてしまう */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, #000, #333);</span><br>
      <span class="hl-green">opacity:</span> <span class="hl-red">0.5;</span> <span class="hl-comment">/* 🚨 中の文字まで薄くなってしまう致命的なミス！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 背景色そのもの（rgba）に透明度を持たせる！ */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(</span><br>
        <span class="hl-red">to bottom,</span><br>
        <span class="hl-red">rgba(0, 0, 0, 0.8),</span> <span class="hl-comment">/* 💡 上は黒の不透明度80% */</span><br>
        <span class="hl-red">rgba(0, 0, 0, 0)</span>    <span class="hl-comment">/* 💡 下は黒の不透明度0%（黒ずみ回避の完全透明） */</span><br>
      <span class="hl-red">), url("背景画像.jpg");</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-trans-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-trans-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-trans-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  justify-content: center;
  /* 画像の代わりとなるチェック柄背景 */
  background-image: 
    linear-gradient(45deg, #ccc 25%, transparent 25%), 
    linear-gradient(-45deg, #ccc 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #ccc 75%), 
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.trans-box {
  width: 250px;
  padding: 30px 20px;
  border-radius: 8px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

.trans-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 10px;
}

.trans-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* ＝＝＝ ❌ 罠：opacityプロパティを使用 ＝＝＝ */
.is-trap-opacity {
  /* 背景はベタ塗りのグラデーション */
  background-image: linear-gradient(to bottom, #000000, #333333);
  /* 🚨 箱全体を半透明にする（文字も読めなくなる） */
  opacity: 0.5;
}
.is-trap-opacity .trans-title {
  color: #ffcccc; /* 赤っぽくしても薄くなる */
}

/* ＝＝＝ ⭕️ 成功：rgbaで背景色のみ半透明に ＝＝＝ */
.is-success-rgba {
  /* 💡 グラデーションの「色」に透明度を指定する */
  background-image: linear-gradient(
    to bottom, 
    rgba(13, 110, 253, 0.9), /* 上は濃い青の90% */
    rgba(13, 110, 253, 0.2)  /* 下は青の20%（透けて見える） */
  );
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.is-success-rgba .trans-title {
  color: #fff; /* 文字はくっきり！ */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.is-success-rgba .trans-text {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-trans-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

3色以上を組み合わせる方法

グラデーションは2色に限定されているわけではありません。

カンマ（,）で区切って色を追加するだけで、3色でも4色でも複数色の複雑でリッチな表現が可能です。

Instagramのロゴのような鮮やかな夕焼け色やサイバーパンクなネオンカラーを作る際によく使用されます。

多色グラデーションを見せるには、「色相環で隣り合う色（類似色）を選んで濁りを防ぐこと。色が切り替わる中継地点の『%』を明記して、美しく見えるバランスに調整すること」です。

⭕️ 3色以上の指定は、類似色を選び「位置（%）」を明記して美しく制御しろ！

❌ 罠（補色＋位置指定なし）

赤から緑へ変化する中間が、濁った茶色やグレーになってしまい非常に美しくありません。

⭕️ 成功（3色の類似色＋%指定）

オレンジ・ピンク・紫の類似色を使い、ピンクのピークを40%に指定することで、濁りのない夕焼けを作っています。

/* ❌ 罠：位置の指定がなく、色が濁る組み合わせ */
.box-fail {
  background-image: linear-gradient(to right, red, green, blue); /* 🚨 中間が泥のように濁る */
}

/* ⭕️ 類似色を選び、カラーストップ（%）で配分をコントロールする！ */
.box-success {
  background-image: linear-gradient(
    135deg,
    #ff7eb3 0%, /* 💡 スタートは明るいピンク */
    #ff758c 40%, /* 💡 40%の少し手前でコーラルピンクを強調 */
    #ff0080 100% /* 💡 ラストは深いマゼンタで締める */
  );
}
HTMLコード表示
<div class="grad-multi-wrapper">
  
  <p class="grad-multi-caption">⭕️ 3色以上の指定は、類似色を選び「位置（%）」を明記して美しく制御しろ！</p>

  <div class="grad-multi-demo-area">
    
    <div class="multi-box is-trap-multi">
      <div class="multi-title">❌ 罠（補色＋位置指定なし）</div>
      <p class="multi-text">赤から緑へ変化する中間が、濁った茶色やグレーになってしまい非常に美しくありません。</p>
    </div>

    <div class="multi-box is-success-multi">
      <div class="multi-title">⭕️ 成功（3色の類似色＋%指定）</div>
      <p class="multi-text">オレンジ・ピンク・紫の類似色を使い、ピンクのピークを40%に指定することで、濁りのない夕焼けを作っています。</p>
    </div>

  </div>

  <div class="grad-multi-code-area">
    <span class="hl-comment">/* ❌ 罠：位置の指定がなく、色が濁る組み合わせ */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, red, green, blue);</span> <span class="hl-comment">/* 🚨 中間が泥のように濁る */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 類似色を選び、カラーストップ（%）で配分をコントロールする！ */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(</span><br>
        <span class="hl-red">135deg,</span><br>
        <span class="hl-red">#ff7eb3 0%,</span>   <span class="hl-comment">/* 💡 スタートは明るいピンク */</span><br>
        <span class="hl-red">#ff758c 40%,</span>  <span class="hl-comment">/* 💡 40%の少し手前でコーラルピンクを強調 */</span><br>
        <span class="hl-red">#ff0080 100%</span>  <span class="hl-comment">/* 💡 ラストは深いマゼンタで締める */</span><br>
      <span class="hl-red">);</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-multi-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-multi-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-multi-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .grad-multi-demo-area {
    flex-direction: row;
  }
}

.multi-box {
  flex: 1;
  padding: 25px 20px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.multi-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.multi-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ＝＝＝ ❌ 罠：濁る3色グラデーション ＝＝＝ */
.is-trap-multi {
  /* 補色を並べたため、中間が茶色/グレーに濁っている */
  background-image: linear-gradient(to right, red, green, blue);
}

/* ＝＝＝ ⭕️ 成功：美しい3色グラデーション（類似色＋％指定） ＝＝＝ */
.is-success-multi {
  /* オレンジ〜ピンク〜紫へと繋がる美しい夕焼けカラー */
  background-image: linear-gradient(
    135deg, 
    #ff9a44 0%, 
    #fc6076 45%, 
    #a811da 100%
  );
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-multi-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

要素別！テキスト・枠線・背景画像への適用

CSSのlinear-gradientは、単なる背景のベタ塗りだけでなく、さまざまな要素の装飾に使えるツールです。

実践的な活用例として、テキスト自体をグラデーションにしたり、画像の上に重ねてフィルターのように使ったりと、デザインの質を一段階引き上げるために多用されます。

ここからは、実務で必須となる要素別の適用と注意点を解説します。

要素別！テキスト・枠線・背景画像への適用
  • 文字色や下線にグラデーションをかける
  • 枠線にグラデーションをつける
  • 背景画像の上に半透明のグラデーションを重ねる
  • box-shadowやmask-imageと組み合わせる装飾

文字色や下線にグラデーションをかける

「文字をグラデーションにして目立たせたい！」というテキストの実装は、ランディングページ（LP）の見出しなどで非常に人気のあるデザインです。

また、文字自体だけでなく、蛍光ペンのような下線を引くテクニックもよく使われます。

文字グラデーションは、「①background-imageでグラデーションを敷き、②-webkit-background-clip: text;で文字の形に切り抜き、③color: transparent;で文字を透明にして背景を透けさせる」という3点セットを記述することです。

⭕️ 文字色（color）ではなく、背景を文字の形に切り抜いて透けさせろ！

Gradient Text

文字の形に背景を切り抜いた美しいグラデーション表現です。

重要なポイントはグラデーションの下線で強調します。

/* ❌ 罠：文字色プロパティには指定できない */
.text-fail {
  color: linear-gradient(to right, red, blue); /* 🚨 構文エラーで無効になる */
}

/* ⭕️ 背景を切り抜いて文字を透明にする！ */
.is-gradient-text {
  background-image: linear-gradient(to right, #f12711, #f5af19);
  -webkit-background-clip: text; /* 💡 背景を文字の形にマスクする */
  color: transparent; /* 💡 文字自体を透明にして、背景色を露出させる */
}
HTMLコード表示
<div class="grad-text-wrapper">
  
  <p class="grad-text-caption">⭕️ 文字色（color）ではなく、背景を文字の形に切り抜いて透けさせろ！</p>

  <div class="grad-text-demo-area">
    
    <div class="demo-text-box">
      <div class="is-gradient-text">Gradient Text</div>
      <p class="desc">文字の形に背景を切り抜いた美しいグラデーション表現です。</p>
    </div>

    <div class="demo-underline-box">
      <p class="desc">
        重要なポイントは<span class="is-gradient-underline">グラデーションの下線</span>で強調します。
      </p>
    </div>

  </div>

  <div class="grad-text-code-area">
    <span class="hl-comment">/* ❌ 罠：文字色プロパティには指定できない */</span><br>
    <span class="hl-blue">.text-fail</span> {<br>
      <span class="hl-green">color:</span> <span class="hl-red">linear-gradient(to right, red, blue);</span> <span class="hl-comment">/* 🚨 構文エラーで無効になる */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 背景を切り抜いて文字を透明にする！ */</span><br>
    <span class="hl-blue">.is-gradient-text</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, #f12711, #f5af19);</span><br>
      <span class="hl-green">-webkit-background-clip:</span> <span class="hl-red">text;</span> <span class="hl-comment">/* 💡 背景を文字の形にマスクする */</span><br>
      <span class="hl-green">color:</span> <span class="hl-red">transparent;</span> <span class="hl-comment">/* 💡 文字自体を透明にして、背景色を露出させる */</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-text-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-text-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-text-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.demo-text-box, .demo-underline-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  text-align: center;
}

/* ＝＝＝ 💡 文字グラデーション ＝＝＝ */
.is-gradient-text {
  font-size: 32px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
  /* 1. グラデーション背景を敷く */
  background-image: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
  /* 2. 背景を文字で切り抜く */
  -webkit-background-clip: text;
  background-clip: text;
  /* 3. 文字を透明にする */
  color: transparent;
}

/* ＝＝＝ 💡 グラデーション下線（蛍光ペン風） ＝＝＝ */
.is-gradient-underline {
  font-weight: bold;
  /* 背景にグラデーションを敷く */
  background-image: linear-gradient(to right, #00f2fe, #4facfe);
  /* 背景を繰り返しなしに設定 */
  background-repeat: no-repeat;
  /* 背景の位置を下部に固定 */
  background-position: bottom;
  /* 背景のサイズを「幅100%、高さ30%」にして下線っぽくする */
  background-size: 100% 30%;
}

.desc {
  margin: 0;
  font-size: 14px;
  color: #333;
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-text-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

文字装飾のまとめや下線の使い方を詳しく知りたい人は以下から一読ください。

枠線にグラデーションをつける

ボタンやカードの周りを囲むグラデーション枠線も、モダンな装飾です。

例えば、角丸のグラデーション枠線を作るには、「border-imageは使わず、親要素（グラデーション）と子要素（単色背景）を重ねて枠線に見せかけるか、『2重の背景（background-clip）』を使うこと」です。

⭕️ border-imageは罠だ！「2重背景トリック」で美しい角丸枠線を作れ！

❌ border-imageの罠
（border-radiusが効かない）

⭕️ 2重背景トリック
（美しい角丸グラデーション）

/* ❌ 罠：border-image を使うと、角丸が強制的に無効化される */
.box-fail {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, red, blue) 1;
  border-radius: 20px; /* 🚨 無視されて真四角になる！ */
}

/* ⭕️ 透明な枠線を引き、中身と枠線の2層の背景を敷き分ける！ */
.box-success {
  border: 4px solid transparent;
  border-radius: 20px; /* 💡 これなら角丸が効く！ */
  /* 💡 1層目(上)は中身の白、2層目(下)はグラデーション */
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #00c6ff, #0072ff);
  /* 💡 1層目はpaddingまで、2層目はborderまで広げる（クリッピング） */
  background-clip: padding-box, border-box;
  /* 💡 グラデーションの起点をborderに合わせる */
  background-origin: border-box;
}
HTMLコード表示
<div class="grad-border-wrapper">
  
  <p class="grad-border-caption">⭕️ border-imageは罠だ！「2重背景トリック」で美しい角丸枠線を作れ！</p>

  <div class="grad-border-demo-area">
    
    <div class="border-box is-trap-border">
      <p class="border-text">❌ border-imageの罠<br>（border-radiusが効かない）</p>
    </div>

    <div class="border-box is-success-border">
      <p class="border-text">⭕️ 2重背景トリック<br>（美しい角丸グラデーション）</p>
    </div>

  </div>

  <div class="grad-border-code-area">
    <span class="hl-comment">/* ❌ 罠：border-image を使うと、角丸が強制的に無効化される */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">border:</span> <span class="hl-red">4px solid transparent;</span><br>
      <span class="hl-green">border-image:</span> <span class="hl-red">linear-gradient(to right, red, blue) 1;</span><br>
      <span class="hl-green">border-radius:</span> <span class="hl-red">20px;</span> <span class="hl-comment">/* 🚨 無視されて真四角になる！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 透明な枠線を引き、中身と枠線の2層の背景を敷き分ける！ */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">border:</span> <span class="hl-red">4px solid transparent;</span><br>
      <span class="hl-green">border-radius:</span> <span class="hl-red">20px;</span> <span class="hl-comment">/* 💡 これなら角丸が効く！ */</span><br>
      <span class="hl-comment">/* 💡 1層目(上)は中身の白、2層目(下)はグラデーション */</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(#fff, #fff), linear-gradient(to right, #00c6ff, #0072ff);</span><br>
      <span class="hl-comment">/* 💡 1層目はpaddingまで、2層目はborderまで広げる（クリッピング） */</span><br>
      <span class="hl-green">background-clip:</span> <span class="hl-red">padding-box, border-box;</span><br>
      <span class="hl-comment">/* 💡 グラデーションの起点をborderに合わせる */</span><br>
      <span class="hl-green">background-origin:</span> <span class="hl-red">border-box;</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-border-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-border-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-border-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  justify-content: center;
}

.border-box {
  width: 220px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  text-align: center;
}

.border-text {
  margin: 0;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

/* ＝＝＝ ❌ 罠：border-image を使った場合 ＝＝＝ */
.is-trap-border {
  border: 4px solid transparent;
  /* 🚨 border-imageを使うと... */
  border-image: linear-gradient(to right, #ff416c, #ff4b2b) 1;
  /* 🚨 どんなに指定しても角丸が無効になる！ */
  border-radius: 20px; 
}
.is-trap-border .border-text {
  color: #dc3545;
}

/* ＝＝＝ ⭕️ 成功：2重背景トリックを使った場合 ＝＝＝ */
.is-success-border {
  /* 枠線の太さ分の透明なボーダーを確保 */
  border: 4px solid transparent;
  /* 💡 この手法なら角丸が綺麗に効く */
  border-radius: 20px; 
  
  /* 1層目：中身の背景色（白） / 2層目：枠線用のグラデーション */
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #00c6ff, #0072ff);
  
  /* 1層目はpaddingエリアまで、2層目はborderエリアまで表示させる */
  background-clip: padding-box, border-box;
  
  /* 背景の描画開始位置をborderエリアに設定する */
  background-origin: border-box;
}
.is-success-border .border-text {
  color: #0072ff;
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-border-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

枠線の使い方を詳しく知りたい人は「【CSS】borderの使い方：線の種類・角丸・重なりの解決策」を一読ください。

【CSS】borderの使い方：線の種類・角丸・重なりの解決策

背景画像の上に半透明のグラデーションを重ねる

ヒーローヘッダー（Webサイトの一番上の巨大な画像エリア）などで、背景画像とグラデーションの合成は避けて通れない実装です。

写真の上に直接白いテキストを乗せると見えづらくなるため、background-imageを用いて、黒やブランドカラーの半透明フィルターを画像に被せます。

画像にグラデーションフィルターを重ねるには、「background-imageの指定順序を『①グラデーション』、カンマ区切りで『②url(...)（下の画像）』の順に記述すること」です。

これを逆にすると、画像が一番上に来てしまいグラデーションが隠れてしまいます。

⭕️ 重なり順は「手前（グラデ） → 奥（写真）」の順番で書け！

❌ 順番の罠（写真が上）

写真のurl()を先に書いたため、グラデーションが下敷きになって見えません。白文字が読みにくいです。

⭕️ 成功（グラデーションが上）

半透明の黒いグラデーションを先に書いたことで、美しいオーバーレイがかかり、文字がくっきり読めます。

/* ❌ 罠：写真(url)を先に書いてしまうと、グラデが下敷きになる */
.overlay-fail {
  background-image: url(“photo.jpg”), /* 🚨 写真が一番上に来てしまう */
                    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8));
}

/* ⭕️ 「グラデーション（半透明）」→「写真」の順に書く！ */
.overlay-success {
  background-image: linear-gradient( /* 💡 1. まず半透明のフタを上に置く */
                      to bottom,
                      rgba(0, 0, 0, 0.8),
                      rgba(0, 0, 0, 0)
                    ),
                    url(“背景画像.jpg”); /* 💡 2. その下に写真を敷く */
}
HTMLコード表示
<div class="grad-img-wrapper">
  
  <p class="grad-img-caption">⭕️ 重なり順は「手前（グラデ） → 奥（写真）」の順番で書け！</p>

  <div class="grad-img-demo-area">
    
    <div class="img-box is-trap-img">
      <div class="img-title">❌ 順番の罠（写真が上）</div>
      <p class="img-text">写真のurl()を先に書いたため、グラデーションが下敷きになって見えません。白文字が読みにくいです。</p>
    </div>

    <div class="img-box is-success-img">
      <div class="img-title">⭕️ 成功（グラデーションが上）</div>
      <p class="img-text">半透明の黒いグラデーションを先に書いたことで、美しいオーバーレイがかかり、文字がくっきり読めます。</p>
    </div>

  </div>

  <div class="grad-img-code-area">
    <span class="hl-comment">/* ❌ 罠：写真(url)を先に書いてしまうと、グラデが下敷きになる */</span><br>
    <span class="hl-blue">.overlay-fail</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">url("photo.jpg"),</span> <span class="hl-comment">/* 🚨 写真が一番上に来てしまう */</span><br>
                        <span class="hl-red">linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8));</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 「グラデーション（半透明）」→「写真」の順に書く！ */</span><br>
    <span class="hl-blue">.overlay-success</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(</span> <span class="hl-comment">/* 💡 1. まず半透明のフタを上に置く */</span><br>
                          <span class="hl-red">to bottom,</span><br>
                          <span class="hl-red">rgba(0, 0, 0, 0.8),</span><br>
                          <span class="hl-red">rgba(0, 0, 0, 0)</span><br>
                        <span class="hl-red">),</span><br>
                        <span class="hl-red">url("背景画像.jpg");</span> <span class="hl-comment">/* 💡 2. その下に写真を敷く */</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-img-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-img-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-img-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.img-box {
  flex: 1;
  min-width: 250px;
  padding: 40px 20px;
  border-radius: 8px;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.img-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}

.img-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* ＝＝＝ ❌ 罠：順番間違い（画像が上） ＝＝＝ */
.is-trap-img {
  /* 実際には画像URLを使えないので、疑似的に派手な柄を画像に見立てます */
  background-image: 
    repeating-linear-gradient(45deg, #a8edea, #a8edea 10px, #fed6e3 10px, #fed6e3 20px),
    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)); /* 🚨 グラデが下敷きになっている */
}
.is-trap-img .img-title, .is-trap-img .img-text {
  /* 背景が派手すぎて読めないシミュレーション */
  text-shadow: 0 0 5px rgba(0,0,0,0.5); 
}

/* ＝＝＝ ⭕️ 成功：正しい順番（グラデが上） ＝＝＝ */
.is-success-img {
  /* 💡 グラデーション（半透明の黒）を先に書き、その後に柄（画像）を書く */
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 100%),
    repeating-linear-gradient(45deg, #a8edea, #a8edea 10px, #fed6e3 10px, #fed6e3 20px);
}
.is-success-img .img-title, .is-success-img .img-text {
  /* フィルターのおかげでくっきり読める */
  text-shadow: none; 
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-img-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

box-shadowやmask-imageと組み合わせる装飾

linear-gradientの活躍の場はさらに広がっています。

ボタンの周りがネオンのように光るものや画像の下部が徐々に透明に消えていくものは、現代のWebデザインで非常に重宝されるリッチな装飾です。

影をグラデーションにする装飾は、「box-shadowは諦め、::beforeなどの『擬似要素』に同じグラデーション背景を持たせ、要素の後ろ（z-index: -1）に配置した上で、filter: blurをかけて影のように見せかけること」です。

⭕️ 影（shadow）にグラデーションは使えない！擬似要素をぼかして（blur）裏に置け！

css mask image linear gradient

/* ❌ 罠：box-shadowプロパティにはグラデーションを指定できない */
.shadow-fail {
  box-shadow: 0 10px 20px linear-gradient(red, blue); /* 🚨 エラーになる */
}

/* ⭕️ 擬似要素にグラデ背景を持たせ、filter: blur でぼかして裏に置く！ */
.glow-button::before {
  content: “”;
  position: absolute;
  z-index: -1; /* 💡 ボタンの裏側に配置 */
  background-image: linear-gradient(45deg, #ff007f, #00d2ff);
  filter: blur(15px); /* 💡 ぼかして「影」に見せかける！ */
}
HTMLコード表示
<div class="grad-adv-wrapper">
  
  <p class="grad-adv-caption">⭕️ 影（shadow）にグラデーションは使えない！擬似要素をぼかして（blur）裏に置け！</p>

  <div class="grad-adv-demo-area">
    
    <div class="adv-box">
      <button class="glow-button">Glow Button</button>
    </div>

    <div class="adv-box">
      <div class="mask-demo-card">
        <p class="mask-text">css mask image linear gradient</p>
      </div>
    </div>

  </div>

  <div class="grad-adv-code-area">
    <span class="hl-comment">/* ❌ 罠：box-shadowプロパティにはグラデーションを指定できない */</span><br>
    <span class="hl-blue">.shadow-fail</span> {<br>
      <span class="hl-green">box-shadow:</span> <span class="hl-red">0 10px 20px linear-gradient(red, blue);</span> <span class="hl-comment">/* 🚨 エラーになる */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 擬似要素にグラデ背景を持たせ、filter: blur でぼかして裏に置く！ */</span><br>
    <span class="hl-blue">.glow-button::before</span> {<br>
      <span class="hl-green">content:</span> <span class="hl-red">"";</span><br>
      <span class="hl-green">position:</span> <span class="hl-red">absolute;</span><br>
      <span class="hl-green">z-index:</span> <span class="hl-red">-1;</span> <span class="hl-comment">/* 💡 ボタンの裏側に配置 */</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(45deg, #ff007f, #00d2ff);</span><br>
      <span class="hl-green">filter:</span> <span class="hl-red">blur(15px);</span> <span class="hl-comment">/* 💡 ぼかして「影」に見せかける！ */</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-adv-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-adv-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-adv-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  background-color: #282c34; /* 見栄えのため暗い背景に */
  padding: 40px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.adv-box {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ＝＝＝ 💡 高度な装飾1：グラデーションの影（Glow Shadow） ＝＝＝ */
.glow-button {
  position: relative;
  background-color: #1a1a1a;
  color: #fff;
  border: none;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  z-index: 1;
}

/* ボタン本体にも薄くグラデーション枠線（疑似要素の組み合わせでも可） */
.glow-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 2px;
  background: linear-gradient(45deg, #ff007f, #00d2ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 💡 これがグラデーションの「影」の正体 */
.glow-button::before {
  content: "";
  position: absolute;
  /* ボタンより少し大きめに広げる */
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  border-radius: 35px;
  background-image: linear-gradient(45deg, #ff007f, #00d2ff);
  /* 💡 ぼかすことで影（発光）に見せる */
  filter: blur(15px);
  opacity: 0.8;
  transition: opacity 0.3s;
}

.glow-button:hover::before {
  opacity: 1;
  filter: blur(20px);
}

/* ＝＝＝ 💡 高度な装飾2：mask-imageによるフェードアウト ＝＝＝ */
.mask-demo-card {
  width: 100%;
  max-width: 200px;
  height: 150px;
  background-image: repeating-linear-gradient(45deg, #f3e7e9 0%, #e3eeff 100%);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  
  /* 💡 グラデーションを使って要素自体を下に向かって透明に切り抜く（マスク） */
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.mask-text {
  margin: 0;
  color: #333;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-adv-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

影を作るbox-shadowの使い方を詳しく知りたい人は「【CSS】box-shadowの使い方：おしゃれな影のコピペ集と浮遊感の作り方」を一読ください。

【CSS】box-shadowの使い方：おしゃれな影のコピペ集と浮遊感の作り方

アニメーションとホバー時の滑らかな変化

Webサイトを魅力的でモダンな印象にするために、グラデーションは「静止画」から「動画」へと進化しています。

背景がゆっくりと変化するアニメーションやボタンにマウスを乗せた瞬間に色がふわっと切り替わる表現は、現代のWebデザインにおいて欠かせないテクニックです。

しかし、CSSのグラデーションは「画像」として扱われるという仕様上、アニメーションをかけようとすると全く動かないという壁にぶつかります。

ここでは、滑らかで美しい動きを実現する実践的なテクニックを解説します。

アニメーションとホバー時の滑らかな変化
  • background-positionを使った動くグラデーションアニメーション
  • transitionを使ったホバーでの色変化のコツ

background-positionを使った動くグラデーションアニメーション

背景のグラデーションがゆったりと動くアニメーションや、スケルトンUIで光が流れるようなローディングアニメーションは、視覚的なリッチさを向上させます。

これらの動くグラデーションを実現する基本となるのが、background-position（背景位置）をアニメーションさせるテクニックです。

動くグラデーションを実装するには、「要素の2倍以上の大きさ（background-size: 200% 200%など）を持つ巨大なグラデーション背景を敷き、@keyframesを使ってbackground-positionを移動させることで『動いているように見せかける』こと」です。

⭕️ 巨大なグラデーションを敷いて、背景位置（position）をスライドさせろ！

❌ 罠の指定

色自体をアニメーションさせようとしているため、滑らかに動かず一瞬で色が切り替わってしまいます。

⭕️ 成功の指定

背景サイズを200%に拡大し、位置を移動させているため、色が波のように滑らかに変化し続けます。

/* ❌ 罠：@keyframes でグラデーションの色自体を変えようとする */
@keyframes failAnim {
  0% { background-image: linear-gradient(red, blue); } /* 🚨 アニメーション不可！ */
  100% { background-image: linear-gradient(yellow, green); }
}

/* ⭕️ 背景を拡大し、position（位置）を動かす！ */
.success-box {
  background-image: linear-gradient(45deg, #ff9a9e, #fecfef, #a18cd1, #fbc2eb);
  background-size: 400% 400%; /* 💡 背景を4倍の巨大サイズにする */
  animation: gradientMove 10s ease infinite; /* 💡 10秒かけて無限ループ */
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; } /* 💡 スタート位置 */
  50% { background-position: 100% 50%; } /* 💡 反対側へスライド */
  100% { background-position: 0% 50%; } /* 💡 元の位置に戻る */
}
HTMLコード表示
<div class="grad-anim-wrapper">
  
  <p class="grad-anim-caption">⭕️ 巨大なグラデーションを敷いて、背景位置（position）をスライドさせろ！</p>

  <div class="grad-anim-demo-area">
    
    <div class="anim-box is-trap-anim">
      <div class="anim-title">❌ 罠の指定</div>
      <p class="anim-text">色自体をアニメーションさせようとしているため、滑らかに動かず一瞬で色が切り替わってしまいます。</p>
    </div>

    <div class="anim-box is-success-anim">
      <div class="anim-title">⭕️ 成功の指定</div>
      <p class="anim-text">背景サイズを200%に拡大し、位置を移動させているため、色が波のように滑らかに変化し続けます。</p>
    </div>

  </div>

  <div class="grad-anim-code-area">
    <span class="hl-comment">/* ❌ 罠：@keyframes でグラデーションの色自体を変えようとする */</span><br>
    <span class="hl-blue">@keyframes failAnim</span> {<br>
      <span class="hl-blue">0%</span> { <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(red, blue);</span> } <span class="hl-comment">/* 🚨 アニメーション不可！ */</span><br>
      <span class="hl-blue">100%</span> { <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(yellow, green);</span> }<br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 背景を拡大し、position（位置）を動かす！ */</span><br>
    <span class="hl-blue">.success-box</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(45deg, #ff9a9e, #fecfef, #a18cd1, #fbc2eb);</span><br>
      <span class="hl-green">background-size:</span> <span class="hl-red">400% 400%;</span> <span class="hl-comment">/* 💡 背景を4倍の巨大サイズにする */</span><br>
      <span class="hl-green">animation:</span> <span class="hl-red">gradientMove 10s ease infinite;</span> <span class="hl-comment">/* 💡 10秒かけて無限ループ */</span><br>
    }<br>
    <span class="hl-blue">@keyframes gradientMove</span> {<br>
      <span class="hl-blue">0%</span> { <span class="hl-green">background-position:</span> <span class="hl-red">0% 50%;</span> } <span class="hl-comment">/* 💡 スタート位置 */</span><br>
      <span class="hl-blue">50%</span> { <span class="hl-green">background-position:</span> <span class="hl-red">100% 50%;</span> } <span class="hl-comment">/* 💡 反対側へスライド */</span><br>
      <span class="hl-blue">100%</span> { <span class="hl-green">background-position:</span> <span class="hl-red">0% 50%;</span> } <span class="hl-comment">/* 💡 元の位置に戻る */</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-anim-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-anim-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-anim-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .grad-anim-demo-area {
    flex-direction: row;
  }
}

.anim-box {
  flex: 1;
  padding: 30px 20px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.anim-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.anim-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ＝＝＝ ❌ 罠：色を直接アニメーションさせる ＝＝＝ */
@keyframes trapAnim {
  0% {
    background-image: linear-gradient(45deg, #ff9a9e, #fecfef);
  }
  100% {
    background-image: linear-gradient(45deg, #a18cd1, #fbc2eb);
  }
}

.is-trap-anim {
  /* なめらかに動かず、0%と100%でパチパチ切り替わる */
  animation: trapAnim 2s infinite alternate;
}

/* ＝＝＝ ⭕️ 成功：background-positionを動かす ＝＝＝ */
@keyframes successAnim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.is-success-anim {
  /* 複数の色を指定したグラデーション */
  background-image: linear-gradient(
    -45deg, 
    #ee7752, 
    #e73c7e, 
    #23a6d5, 
    #23d5ab
  );
  /* 💡 背景を要素の4倍に拡大 */
  background-size: 400% 400%;
  /* 💡 positionをアニメーションさせる */
  animation: successAnim 10s ease infinite;
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-anim-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

様々な要素に対するアニメーションを詳しく知りたい人は「【CSS】アニメーションの作り方：コピペで使えるおしゃれサンプル集」を一読ください。

【CSS】アニメーションの作り方：コピペで使えるおしゃれサンプル集

transitionを使ったホバーでの色変化のコツ

ボタンにマウスを乗せた時、色がふわっと切り替わる実装は、ユーザーに「押せる」ことを伝えるための基本です。

グラデーションのホバー変化を滑らかにするには、「要素自身の色を変えるのではなく、『ホバー後のグラデーション』を持たせた疑似要素（::before）を上に被せておき、ホバー時に疑似要素のopacityを0から1へとtransitionでフェードインさせること」です。

この「疑似要素のクロスフェードトリック」が実務での最適解となります。

⭕️ グラデーションはtransition不可！疑似要素の不透明度（opacity）をフェードインさせろ！

❌ 罠の指定（一瞬で変わる）

transitionが効かず、パチッと切り替わってしまいます。

⭕️ 成功の指定（滑らかに変わる）

疑似要素の不透明度を変化させているため、ふわっと美しく切り替わります。

/* ❌ 罠：背景画像（グラデーション）に直接transitionをかける */
.btn-fail {
  background-image: linear-gradient(red, blue);
  transition: background-image 0.3s; /* 🚨 画像の補間はできないため無視される！ */
}
.btn-fail:hover {
  background-image: linear-gradient(yellow, green);
}

/* ⭕️ 疑似要素の opacity（不透明度）を transition させる！ */
.btn-success {
  position: relative;
  background-image: linear-gradient(to right, #00c6ff, #0072ff); /* 通常時の色 */
  z-index: 1;
}
.btn-success::before {
  content: “”;
  position: absolute;
  inset: 0; /* ボタン全体を覆う */
  background-image: linear-gradient(to right, #f12711, #f5af19); /* ホバー時の色 */
  opacity: 0; /* 💡 初期状態では透明にして隠しておく */
  transition: opacity 0.3s ease; /* 💡 不透明度なら滑らかに変化する！ */
  z-index: -1; /* 文字の後ろ、背景の前に配置 */
}
.btn-success:hover::before {
  opacity: 1; /* 💡 ホバーでフェードインさせる */
}
HTMLコード表示
<div class="grad-hover-wrapper">
  
  <p class="grad-hover-caption">⭕️ グラデーションはtransition不可！疑似要素の不透明度（opacity）をフェードインさせろ！</p>

  <div class="grad-hover-demo-area">
    
    <div class="hover-box">
      <p class="hover-label">❌ 罠の指定（一瞬で変わる）</p>
      <button class="btn-demo is-trap-hover">Hover Me!</button>
      <p class="hover-desc">transitionが効かず、パチッと切り替わってしまいます。</p>
    </div>

    <div class="hover-box">
      <p class="hover-label">⭕️ 成功の指定（滑らかに変わる）</p>
      <button class="btn-demo is-success-hover">
        <span class="btn-text">Hover Me!</span>
      </button>
      <p class="hover-desc">疑似要素の不透明度を変化させているため、ふわっと美しく切り替わります。</p>
    </div>

  </div>

  <div class="grad-hover-code-area">
    <span class="hl-comment">/* ❌ 罠：背景画像（グラデーション）に直接transitionをかける */</span><br>
    <span class="hl-blue">.btn-fail</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(red, blue);</span><br>
      <span class="hl-green">transition:</span> <span class="hl-red">background-image 0.3s;</span> <span class="hl-comment">/* 🚨 画像の補間はできないため無視される！ */</span><br>
    }<br>
    <span class="hl-blue">.btn-fail:hover</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(yellow, green);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 疑似要素の opacity（不透明度）を transition させる！ */</span><br>
    <span class="hl-blue">.btn-success</span> {<br>
      <span class="hl-green">position:</span> <span class="hl-red">relative;</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, #00c6ff, #0072ff);</span> <span class="hl-comment">/* 通常時の色 */</span><br>
      <span class="hl-green">z-index:</span> <span class="hl-red">1;</span><br>
    }<br>
    <span class="hl-blue">.btn-success::before</span> {<br>
      <span class="hl-green">content:</span> <span class="hl-red">"";</span><br>
      <span class="hl-green">position:</span> <span class="hl-red">absolute;</span><br>
      <span class="hl-green">inset:</span> <span class="hl-red">0;</span> <span class="hl-comment">/* ボタン全体を覆う */</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, #f12711, #f5af19);</span> <span class="hl-comment">/* ホバー時の色 */</span><br>
      <span class="hl-green">opacity:</span> <span class="hl-red">0;</span> <span class="hl-comment">/* 💡 初期状態では透明にして隠しておく */</span><br>
      <span class="hl-green">transition:</span> <span class="hl-red">opacity 0.3s ease;</span> <span class="hl-comment">/* 💡 不透明度なら滑らかに変化する！ */</span><br>
      <span class="hl-green">z-index:</span> <span class="hl-red">-1;</span> <span class="hl-comment">/* 文字の後ろ、背景の前に配置 */</span><br>
    }<br>
    <span class="hl-blue">.btn-success:hover::before</span> {<br>
      <span class="hl-green">opacity:</span> <span class="hl-red">1;</span> <span class="hl-comment">/* 💡 ホバーでフェードインさせる */</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-hover-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grad-hover-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grad-hover-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .grad-hover-demo-area {
    flex-direction: row;
  }
}

.hover-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ced4da;
}

.hover-label {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 15px;
}

.hover-desc {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  line-height: 1.5;
}

/* ボタンの共通スタイル */
.btn-demo {
  border: none;
  padding: 15px 40px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  border-radius: 30px;
  cursor: pointer;
}

/* ＝＝＝ ❌ 罠：background-imageにtransitionをかける ＝＝＝ */
.is-trap-hover {
  background-image: linear-gradient(to right, #00c6ff, #0072ff);
  /* 🚨 transition をかけても無視される */
  transition: background-image 0.4s ease;
}

.is-trap-hover:hover {
  /* ホバー時にパチッと一瞬で切り替わってしまう */
  background-image: linear-gradient(to right, #f12711, #f5af19);
}

/* ＝＝＝ ⭕️ 成功：疑似要素のopacityをフェードイン ＝＝＝ */
.is-success-hover {
  /* ボタン本体の設定 */
  position: relative;
  background-image: linear-gradient(to right, #00c6ff, #0072ff);
  /* 疑似要素がはみ出ないようにする（または疑似要素に同じborder-radiusをつける） */
  overflow: hidden; 
  /* 文字を前面に出すためのスタッキングコンテキスト生成 */
  z-index: 1; 
}

/* テキストを疑似要素より上に配置 */
.btn-text {
  position: relative;
  z-index: 2;
}

/* ホバー用のグラデーションを持った疑似要素 */
.is-success-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ホバー時の色を仕込んでおく */
  background-image: linear-gradient(to right, #f12711, #f5af19);
  
  /* 💡 初期状態は透明にする */
  opacity: 0;
  /* 💡 opacity は完璧に transition できる！ */
  transition: opacity 0.4s ease;
  /* ボタン背景とテキストの間に配置 */
  z-index: -1; 
}

/* ホバー時に疑似要素を不透明にする（フェードイン） */
.is-success-hover:hover::before {
  opacity: 1;
}

/* ＝コード解説エリア（エディタ風）＝ */
.grad-hover-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

transitionの使い方を詳しく知りたい人は「【CSS】transitionの使い方：animationやtransformとの違い」を一読ください。

【CSS】transitionの使い方：animationやtransformとの違い

ストライプ柄と便利ジェネレーター

CSSのグラデーション機能は上記だけにとどまりません。

特定の関数を使えば、実務で使われる「ストライプ柄」や「ボーダー柄」の背景を画像なしで作成することができます。

さらに、複雑な配色を視覚的に作成できる便利なツールの活用法、SVGアイコンへのグラデーション適用などの実装テクニックをマスターしましょう。

ストライプ柄と便利ジェネレーター
  • repeating-linear-gradientで作るストライプやボーダー柄
  • コピペで簡単！linear-gradient作成ツールとジェネレーター
  • SVGでのグラデーション指定
  • グラデーションが効かない時のチェックリスト

repeating-linear-gradientで作るストライプやボーダー柄

背景に斜線のストライプ柄やノートのようなボーダー柄を作りたい時は、繰り返しの線形グラデーションを実現する専用の関数であるrepeating-linear-gradient()を使用します。

小さなパターンを無限に繰り返すことができるため、画像データを読み込むことなく、軽量で高解像度なパターン背景を作成できます。

くっきりとしたストライプ柄を作るには、「色の開始位置と終了位置（ハードストップ）を同じ数値にして、色が混ざる隙間を無くすこと」です。

⭕️ ストライプ柄は「ハードストップ」でくっきり切り分けろ！

❌ 罠（ぼやける）

⭕️ 成功（くっきり）

/* ❌ 罠：0px〜20pxにかけて色が混ざってしまう */
.box-fail {
  background-image: repeating-linear-gradient(45deg, #0d6efd, #ffffff 20px);
}

/* ⭕️ 同じピクセル数を指定して境界線を潰す！ */
.box-success {
  background-image: repeating-linear-gradient(
    45deg,
    #0d6efd 0px,
    #0d6efd 20px, /* 💡 0px〜20pxまでは青 */
    #ffffff 20px, /* 💡 20pxから白がスタート（混ざる隙間がない） */
    #ffffff 40px /* 💡 20px〜40pxまでは白 */
  );
}
HTMLコード表示
<div class="stripe-wrapper">
  
  <p class="stripe-caption">⭕️ ストライプ柄は「ハードストップ」でくっきり切り分けろ！</p>

  <div class="stripe-demo-area">
    
    <div class="stripe-box is-trap-stripe">
      <p class="stripe-label">❌ 罠（ぼやける）</p>
    </div>

    <div class="stripe-box is-success-stripe">
      <p class="stripe-label">⭕️ 成功（くっきり）</p>
    </div>

  </div>

  <div class="stripe-code-area">
    <span class="hl-comment">/* ❌ 罠：0px〜20pxにかけて色が混ざってしまう */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">repeating-linear-gradient(45deg, #0d6efd, #ffffff 20px);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 同じピクセル数を指定して境界線を潰す！ */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">repeating-linear-gradient(</span><br>
        <span class="hl-red">45deg,</span><br>
        <span class="hl-red">#0d6efd 0px,</span><br>
        <span class="hl-red">#0d6efd 20px,</span> <span class="hl-comment">/* 💡 0px〜20pxまでは青 */</span><br>
        <span class="hl-red">#ffffff 20px,</span> <span class="hl-comment">/* 💡 20pxから白がスタート（混ざる隙間がない） */</span><br>
        <span class="hl-red">#ffffff 40px</span>  <span class="hl-comment">/* 💡 20px〜40pxまでは白 */</span><br>
      <span class="hl-red">);</span><br>
    }
  </div>

</div>
CSSコード表示
.stripe-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.stripe-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.stripe-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.stripe-box {
  width: 220px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border: 1px solid #ced4da;
}

.stripe-label {
  color: #333;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ＝＝＝ ❌ 罠：ぼやけたストライプ ＝＝＝ */
.is-trap-stripe {
  background-image: repeating-linear-gradient(45deg, #0d6efd, #ffffff 20px);
}
.is-trap-stripe .stripe-label {
  color: #dc3545;
}

/* ＝＝＝ ⭕️ 成功：くっきりしたストライプ ＝＝＝ */
.is-success-stripe {
  background-image: repeating-linear-gradient(
    45deg, 
    #0d6efd 0px, 
    #0d6efd 20px, 
    #ffffff 20px, 
    #ffffff 40px
  );
}
.is-success-stripe .stripe-label {
  color: #198754;
}

/* ＝コード解説エリア（エディタ風）＝ */
.stripe-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

コピペで簡単！linear-gradient作成ツールとジェネレーター

3色以上の複雑なグラデーションや斜めのストライプ柄を手書きのコードだけで調整するのは至難の業です。

実務の現場では、ビジュアルツールを活用するのが一般的です。（代表例: CSS Gradient や ColorZilla など）

グラデーション作成には、「手書きにこだわらず、ジェネレーターで視覚的に『美しく見える状態』を作り、吐き出されたコードをコピペすること」です。

開発スピードと正確性の両方を担保できます。

⭕️ 複雑な多色ブレンドはジェネレーターに頼ってコードをコピペしろ！

ジェネレーター生成コード例

このような4色の繊細なグラデーションも、ツールを使えば直感的に作成し、ワンクリックでCSSコードとして取得できます。

/* 💡 ジェネレーター（CSS Gradient等）から出力されたコードの例 */
.complex-gradient {
  background: rgb(131,58,180); /* フォールバック用の単色背景 */
  background: linear-gradient(
    90deg,
    rgba(131,58,180,1) 0%,
    rgba(253,29,29,1) 50%,
    rgba(252,176,69,1) 100%
  );
}
HTMLコード表示
<div class="gen-wrapper">
  
  <p class="gen-caption">⭕️ 複雑な多色ブレンドはジェネレーターに頼ってコードをコピペしろ！</p>

  <div class="gen-demo-area">
    
    <div class="gen-card">
      <div class="gen-preview"></div>
      <div class="gen-info">
        <div class="gen-title">ジェネレーター生成コード例</div>
        <p class="gen-text">
          このような4色の繊細なグラデーションも、ツールを使えば直感的に作成し、ワンクリックでCSSコードとして取得できます。
        </p>
      </div>
    </div>

  </div>

  <div class="gen-code-area">
    <span class="hl-comment">/* 💡 ジェネレーター（CSS Gradient等）から出力されたコードの例 */</span><br>
    <span class="hl-blue">.complex-gradient</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">rgb(131,58,180);</span> <span class="hl-comment">/* フォールバック用の単色背景 */</span><br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(</span><br>
        <span class="hl-red">90deg,</span><br>
        <span class="hl-red">rgba(131,58,180,1) 0%,</span><br>
        <span class="hl-red">rgba(253,29,29,1) 50%,</span><br>
        <span class="hl-red">rgba(252,176,69,1) 100%</span><br>
      <span class="hl-red">);</span><br>
    }
  </div>

</div>
CSSコード表示
.gen-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.gen-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.gen-demo-area {
  display: flex;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.gen-card {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border: 1px solid #ced4da;
}

.gen-preview {
  height: 150px;
  width: 100%;
  /* ジェネレーターから生成したような複雑なグラデーション */
  background: rgb(131,58,180);
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.gen-info {
  padding: 20px;
}

.gen-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.gen-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}

/* ＝コード解説エリア（エディタ風）＝ */
.gen-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

SVGでのグラデーション指定

HTML内の要素だけでなく、アイコンなどに使われるベクターデータ「SVG」に対してもグラデーションを適用することができます。

しかし、通常のHTML要素（divなど）に適用するbackground-image: linear-gradient(...)というCSSの書き方は、SVGのパス（<path>や<rect>）には全く効きません。

SVGにグラデーションをかけるには、「SVGタグ内の<defs>の中に<linearGradient>タグを書いてグラデーションを定義し、CSS側のfillプロパティで『fill: url(#定義したID);』と呼び出すこと」です。

⭕️ SVGには background は効かない！内部で定義して fill: url(#id) で呼び出せ！

グラデーションが適用されたSVG

/* ❌ 罠：SVGの塗りつぶしにCSSのlinear-gradient関数は使えない */
.circle-fail {
  fill: linear-gradient(to right, red, blue); /* 🚨 エラーで真っ黒になる */
}

/* ⭕️ SVG内で定義したIDを url() で呼び出して塗りつぶす（fill）！ */
.gradient-circle {
  fill: url(#myGradient); /* 💡 で定義したグラデーションのIDを指定 */
  stroke: #0056b3;
  stroke-width: 2px;
}
HTMLコード表示
<div class="svg-grad-wrapper">
  
  <p class="svg-grad-caption">⭕️ SVGには background は効かない！内部で定義して fill: url(#id) で呼び出せ！</p>

  <div class="svg-grad-demo-area">
    
    <div class="svg-box">
      <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        
        <defs>
          <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#00f2fe" />
            <stop offset="100%" stop-color="#4facfe" />
          </linearGradient>
        </defs>

        <circle cx="50" cy="50" r="45" class="gradient-circle" />
      </svg>
      <p class="svg-label">グラデーションが適用されたSVG</p>
    </div>

  </div>

  <div class="svg-grad-code-area">
    <span class="hl-comment">/* ❌ 罠：SVGの塗りつぶしにCSSのlinear-gradient関数は使えない */</span><br>
    <span class="hl-blue">.circle-fail</span> {<br>
      <span class="hl-green">fill:</span> <span class="hl-red">linear-gradient(to right, red, blue);</span> <span class="hl-comment">/* 🚨 エラーで真っ黒になる */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ SVG内で定義したIDを url() で呼び出して塗りつぶす（fill）！ */</span><br>
    <span class="hl-blue">.gradient-circle</span> {<br>
      <span class="hl-green">fill:</span> <span class="hl-red">url(#myGradient);</span> <span class="hl-comment">/* 💡 <defs> で定義したグラデーションのIDを指定 */</span><br>
      <span class="hl-green">stroke:</span> <span class="hl-red">#0056b3;</span><br>
      <span class="hl-green">stroke-width:</span> <span class="hl-red">2px;</span><br>
    }
  </div>

</div>
CSSコード表示
.svg-grad-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.svg-grad-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.svg-grad-demo-area {
  display: flex;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.svg-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #ced4da;
}

.svg-label {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

/* ＝＝＝ 💡 SVGへのCSS指定 ＝＝＝ */
.gradient-circle {
  /* 🚨 background-image ではなく fill を使う */
  /* 💡 SVGの <defs> 内で定義したID「myGradient」を url() で呼び出す */
  fill: url(#myGradient);
  stroke: #e9ecef;
  stroke-width: 3px;
  transition: transform 0.3s ease;
}

.gradient-circle:hover {
  transform: scale(1.05);
}

/* ＝コード解説エリア（エディタ風）＝ */
.svg-grad-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

グラデーションが効かない時のチェックリスト

「コードは合っているはずなのに、どうしてもグラデーションが効かない！」というトラブルは、初心者から中級者まで共通して発生する悩みです。

大半の原因は、「プロパティの勘違い」や「構文エラー」に集約されますが、もう一つ要素のサイズ変更時に発生する グラデーションの繰り返し挙動に関する落とし穴があります。

グラデーションが効かない、または崩れた時は以下の「3つのチェックリスト」を順番に確認するのがよいです。

  1. プロパティ名確認
    background-colorではなくbackground-imageまたはbackgroundになっているか？
  2. 構文（カンマ）確認
    カンマの抜け漏れや不要な全角スペースが混入していないか？
  3. リピート防止設定
    要素が可変する場合、background-repeat: no-repeat;（または一括指定でno-repeat）を指定しているか？

⭕️ 効かない時は「プロパティ名」を疑え！伸びた時に崩れないよう no-repeat もセットに！

❌ リピートの罠

グラデーションが効いていても、要素の高さが広まった時に、デフォルトの仕様によって背景が上下に反復（リピート）してしまい、シマシマな不自然な境界線ができてしまいます。
（※デモ用に意図的に背景サイズを制限してリピートさせています）

⭕️ 成功（no-repeat指定）

background-repeat: no-repeat; を指定し、さらに background-size: cover; 等で領域を適切に覆うことで、要素がどんなに伸びても美しいグラデーションが維持されます。

/* ❌ 罠：効かない原因のトップは「プロパティ間違い」 */
.box-fail-1 {
  background-color: linear-gradient(red, blue); /* 🚨 color ではなく image！ */
}

/* ⭕️ 画像（image）として指定し、要素が伸びる場合はリピートを防止する！ */
.box-success {
  background-image: linear-gradient(to bottom, #11998e, #38ef7d);
  background-repeat: no-repeat; /* 💡 要素が伸びた時の不自然なループを防ぐ */
  background-size: cover; /* 💡 背景領域全体をカバーさせる */
}

background-imageの使い方を詳しく知りたい人は「【CSS】background-imageの使い方：サイズ・透過・レスポンシブ」を一読ください。

【CSS】background-imageの使い方：サイズ・透過・レスポンシブ

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • グラデーションは画像扱いとなるため、background-colorではなくbackground-image（またはbackground）に指定する。
  • 方向は「目的地（to right 等）」または「角度（deg）」で指定する。
  • 隣り合うカラーストップ（%）を同じ数値に設定すると、色が混ざらず境界がくっきりと分かれる。
  • 半透明にする場合は要素全体のopacityではなく、色指定自体にrgbaを使用して黒潰れや可読性の低下を防ぐ。
  • 文字にグラデーションをかける場合は、background-clip: textとcolor: transparentの組み合わせが必須である。
  • 角丸の枠線にグラデーションをかける場合、border-imageは角丸を無効化するため、2重背景（background-clip）のトリックで実装する。
  • 背景画像に重ねる場合は、手前（グラデーション）→奥（画像URL）の順にカンマ区切りで記述する。
  • グラデーション自体のアニメーションは、背景サイズを拡大した上でbackground-positionを移動させて表現する。
  • ホバー時の滑らかな色変化は、transitionでは実装できないため、擬似要素のopacityをフェードインさせる。
  • ストライプ柄はrepeating-linear-gradientを使用し、色の開始と終了を同じ位置にして境界を潰す。
  • 3色以上の複雑な配色や斜めのグラデーション作成には、ジェネレーターツールの活用が効率的である。
  • SVGに適用する場合は、SVG内部の<defs>で<linearGradient>を定義し、CSSのfillプロパティでIDを呼び出す。
  • 要素が伸縮した際のデザイン崩れを防ぐため、必要に応じてbackground-repeat: no-repeatを併記する。

よくある質問（FAQ）

linear-gradientの基本的な書き方（構文）を教えてください。

linear-gradient(方向, 開始色, 終了色)が基本の書き方です。

これを背景として適用するため、background-image: linear-gradient(to right, red, blue);のように記述します。

「方向」にはto right（左から右へ）などのキーワードのほか、45degのような角度を指定することも可能です。

色はカンマで区切ることで3色以上指定することもできます。

CSSに記述したのにグラデーションが効かないのはなぜですか？

最も多い原因は、background-colorプロパティに対して指定してしまっていることです。

CSSの仕様上、グラデーションは「色」ではなく「画像」として扱われます。

そのため、background-imageまたは一括指定のbackgroundプロパティに記述してください。

これを修正するだけで解決することがほとんどです。

文字（テキスト）の色をグラデーションにすることはできますか？

はい、可能です。

ただし、文字色（color）には直接指定できないため、CSSの切り抜き機能を使います。

具体的には、①background-imageでグラデーション背景を作り、②-webkit-background-clip: text;で背景を文字の形に切り抜き、③color: transparent;で文字自体を透明にして後ろのグラデーションを透けさせる、という3行のセットで実装します。

色が徐々に混ざるのではなく、境界線をくっきり分けるにはどうすればいいですか？

色が切り替わる位置（カラーストップの%やpx）を「同じ数値」に設定してください。

例えば、linear-gradient(to right, red 50%, blue 50%)のように、赤の終わりと青の始まりを同じ50%に指定すると、色が混ざり合う隙間がなくなり、画面の半分でくっきりと色が分かれたハードストップを作ることができます。

背景画像（写真）の上に、半透明のグラデーションを重ねることはできますか？

はい、可能です。

background-imageプロパティに、カンマ区切りで複数の背景を指定します。

記述する際は、「手前（グラデーション）」→「奥（画像URL）」の順番 にしてください。

例：background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0)), url('photo.jpg');

順番を逆にすると、写真が上に被さってしまいグラデーションが見えなくなります。

CONTACT

サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。

お問い合わせページへ
WordPress移行
Webサイトを公開しよう！

「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。

おすすめサーバー4選を見る
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次