MENU
  1. ホーム
  2. CSS
  3. 【CSS】gradientの使い方：背景・文字・枠線のグラデーション

【CSS】gradientの使い方：背景・文字・枠線のグラデーション

CSS
css-gradation

CSSグラデーションは、画像を使わずに多彩で美しい背景やUI要素を表現できるWebデザインに不可欠なプロパティです。

本記事では、基本となる3種類の使い方、テキストや角丸枠線への応用、滑らかに動くアニメーションの実装、実務で陥りやすいトラブルの解決策を解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

CSSグラデーションの基本と3つの種類

Webデザインにおいて、ボタンや背景を彩るグラデーションがあります。

画像を切り出して使っていましたが、今ではCSSのgradientを使えば、コードだけで多彩な表現が可能になります。

gradientの用法は、大きく分けて3つの種類が存在します。

さらに、これらを応用すれば画像を使わずにグラデーションアニメーションを実装することも可能です。

ここでは、gradientの構文と実務で使えるテクニックを種類別に解説します。

CSSグラデーションの基本と3つの種類
  • linear-gradient（線形）の方向と角度の指定方法
  • radial-gradient（円形）とconic-gradient（扇形）
  • repeatingを使ったストライプグラデーション

様々な要素に対するグラデーションの作り方を詳しく知りたい人は「【CSS】グラデーションの作り方：文字・背景・枠線・アニメーション」を一読ください。

【CSS】グラデーションの作り方：文字・背景・枠線・アニメーション

linear-gradient（線形）の方向と角度の指定方法

グラデーションの中で基本かつ使用頻度が高いのが、直線的に色が変化するlinear-gradientです。

linear-gradientの使い方で重要なのは、「方向」または「角度」の指定です。

デフォルトは上から下ですが、to rightで左から右へ、to bottom rightで斜めへと自由にコントロールできます。

現代のブラウザではプレフィックスは不要です。

例えば「方向を指定する場合は、to [方向]（例：to right）の形式で書くこと」ができます。

角度で微調整したい場合は45deg（45度）のように指定します。

⭕️ 方向は「to [方向]」か「角度（deg）」で指定する！

デフォルト
(上から下)

to right
(左から右)

to bottom right
(左上から右下)

45deg
(角度で指定)

/* 💡 デフォルト（指定なし）は「上から下」 */
.grad-default {
  background: linear-gradient(#ff0080, #ff8c00);
}

/* ⭕️ 方向は to [目的の方向] で指定する */
.grad-horizontal {
  background: linear-gradient(to right, #ff0080, #ff8c00);
}

/* 💡 角度で細かく調整する場合 */
.grad-degree {
  background: linear-gradient(45deg, #ff0080, #ff8c00);
}
HTMLコード表示
<div class="gradient-linear-layout-wrapper">
  
  <p class="gradient-linear-caption">⭕️ 方向は「to [方向]」か「角度（deg）」で指定する！</p>

  <div class="gradient-linear-demo-area">
    
    <div class="gradient-linear-item">
      <p class="gradient-linear-label">デフォルト<br><small>(上から下)</small></p>
      <div class="gradient-linear-box is-default"></div>
    </div>

    <div class="gradient-linear-item">
      <p class="gradient-linear-label">to right<br><small>(左から右)</small></p>
      <div class="gradient-linear-box is-horizontal"></div>
    </div>

    <div class="gradient-linear-item">
      <p class="gradient-linear-label">to bottom right<br><small>(左上から右下)</small></p>
      <div class="gradient-linear-box is-diagonal"></div>
    </div>

    <div class="gradient-linear-item">
      <p class="gradient-linear-label">45deg<br><small>(角度で指定)</small></p>
      <div class="gradient-linear-box is-degree"></div>
    </div>

  </div>

  <div class="gradient-linear-code-area">
    <span class="hl-comment">/* 💡 デフォルト（指定なし）は「上から下」 */</span><br>
    <span class="hl-blue">.grad-default</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(#ff0080, #ff8c00);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 方向は to [目的の方向] で指定する */</span><br>
    <span class="hl-blue">.grad-horizontal</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to right, #ff0080, #ff8c00);</span><br>
    }<br><br>

    <span class="hl-comment">/* 💡 角度で細かく調整する場合 */</span><br>
    <span class="hl-blue">.grad-degree</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(45deg, #ff0080, #ff8c00);</span><br>
    }
  </div>

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

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

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

.gradient-linear-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 140px;
}

.gradient-linear-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
  height: 40px;
}

.gradient-linear-box {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ＝💡 実践コード：linear-gradientの方向（色が分かりやすいように変更）＝ */
.is-default {
  background: linear-gradient(#ff0080, #ff8c00);
}

.is-horizontal {
  background: linear-gradient(to right, #ff0080, #ff8c00);
}

.is-diagonal {
  background: linear-gradient(to bottom right, #ff0080, #ff8c00);
}

.is-degree {
  background: linear-gradient(45deg, #ff0080, #ff8c00);
}

/* ＝コード解説エリア＝ */
.gradient-linear-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;
}

.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; }

radial-gradient（円形）とconic-gradient（扇形）

直線ではなく、中心から外側に向かって円形に広がるのがradial-gradientです。

正円や楕円など、様々な形状を作り出すことができます。

さらに、最近のブラウザで使えるようになったのが、時計回りに色が変化する扇形のconic-gradientです。

円グラフの実装などに役立ちます。

要素の縦横比に関わらず、「常に『正円』のグラデーションを保ちたい場合はradial-gradient(circle, 色1, 色2)のようにcircleキーワードを明記すること」です。

これにより、意図しない楕円化を防ぐことができます。

⭕️ 形を変えるグラデーションと、長方形における「正円」キープの鉄則

❌ 罠（長方形に指定なし）
要素に合わせて楕円に伸びる

⭕️ 成功（circleを指定）
長方形でも綺麗な正円を保つ

conic-gradient
時計回りの扇形

/* ❌ 長方形にそのまま radial-gradient をかける */
.btn-fail {
  background: radial-gradient(#0dccea, #0d70ea); /* 🚨 横長に伸びた楕円になってしまう！ */
}

/* ⭕️ 常に「正円」にしたい場合は circle をつける */
.btn-success {
  background: radial-gradient(circle, #0dccea, #0d70ea); /* 💡 これで美しい丸をキープ */
}

/* 💡 （おまけ）円グラフも作れる conic-gradient */
.pie-chart {
  background: conic-gradient(#ffcd56, #ff6384, #36a2eb);
}
HTMLコード表示
<div class="gradient-shape-layout-wrapper">
  
  <p class="gradient-shape-caption">⭕️ 形を変えるグラデーションと、長方形における「正円」キープの鉄則</p>

  <div class="gradient-shape-demo-area">
    
    <div class="gradient-shape-item" style="width: 100%;">
      <p class="gradient-shape-label" style="color:#dc3545;">❌ 罠（長方形に指定なし）<br><small>要素に合わせて楕円に伸びる</small></p>
      <!-- 💡 デフォルトだと楕円になる -->
      <div class="gradient-shape-rect is-ellipse"></div>
    </div>

    <div class="gradient-shape-item" style="width: 100%;">
      <p class="gradient-shape-label" style="color:#0d6efd;">⭕️ 成功（circleを指定）<br><small>長方形でも綺麗な正円を保つ</small></p>
      <!-- 💡 circle指定で正円を維持 -->
      <div class="gradient-shape-rect is-circle"></div>
    </div>

    <div class="gradient-shape-item" style="margin-top: 20px;">
      <p class="gradient-shape-label">conic-gradient<br><small>時計回りの扇形</small></p>
      <!-- 💡 円グラフのような扇形グラデーション -->
      <div class="gradient-shape-box is-conic"></div>
    </div>

  </div>

  <div class="gradient-shape-code-area">
    <span class="hl-comment">/* ❌ 長方形にそのまま radial-gradient をかける */</span><br>
    <span class="hl-blue">.btn-fail</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">radial-gradient(#0dccea, #0d70ea);</span> <span class="hl-comment">/* 🚨 横長に伸びた楕円になってしまう！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 常に「正円」にしたい場合は circle をつける */</span><br>
    <span class="hl-blue">.btn-success</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">radial-gradient(circle, #0dccea, #0d70ea);</span> <span class="hl-comment">/* 💡 これで美しい丸をキープ */</span><br>
    }<br><br>

    <span class="hl-comment">/* 💡 （おまけ）円グラフも作れる conic-gradient */</span><br>
    <span class="hl-blue">.pie-chart</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">conic-gradient(#ffcd56, #ff6384, #36a2eb);</span><br>
    }
  </div>

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

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

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

.gradient-shape-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gradient-shape-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* 長方形のベース */
.gradient-shape-rect {
  width: 250px;
  height: 80px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 正方形のベース */
.gradient-shape-box {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* 丸くしておく */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ＝❌ 罠：指定なし（長方形だと楕円になる）＝ */
.is-ellipse {
  background: radial-gradient(#0dccea, #0d70ea);
}

/* ＝⭕️ 正解：circle指定（長方形でも正円）＝ */
.is-circle {
  background: radial-gradient(circle, #0dccea, #0d70ea);
}

/* ＝💡 実践コード：conic-gradient＝ */
.is-conic {
  background: conic-gradient(#ffcd56, #ff6384, #36a2eb, #ffcd56);
}

/* ＝コード解説エリア＝ */
.gradient-shape-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;
}

repeatingを使ったストライプグラデーション

グラデーションは滑らかに色を変化させるだけでなく、繰り返すことでストライプや幾何学模様などの柄を作り出すことも可能です。

これには、各種グラデーションの頭にrepeating-を付けた、repeating-linear-gradient、repeating-radial-gradient、repeating-conic-gradientを使用します。

くっきりとしたストライプや柄を作るには、「色の『終了位置』と次の色の『開始位置』を同じ数値にすること」です。

例えばyellow 0px 10px, black 10px 20pxのように、前の色が10pxで終わった瞬間に、次の色を10pxからスタートさせることで、ぼかしが発生する余地をなくし、境界線を引くことができます。

⭕️ ストライプ柄を作るなら、色の「境界線の数値」をピッタリ合わせろ！

❌ 罠（普通に指定）
境界がボケてしまう

⭕️ 成功（数値調整）
くっきりストライプ！

repeating-radial
同心円の模様

/* ❌ 色の位置をズラして指定してしまう */
.stripe-fail {
  background: repeating-linear-gradient(45deg, #f1c40f 10px, #333 20px); /* 🚨 ボケる！ */
}

/* ⭕️ 前の色の「終わり」と次の色の「始まり」を同じ数値にする！ */
.stripe-success {
  background: repeating-linear-gradient(
    45deg,
    #f1c40f 0px 10px, /* 💡 黄色は 0〜10px まで */
    #333 10px 20px /* 💡 黒は 10px からスタート！これでくっきり分かれる */
  );
}
HTMLコード表示
<div class="gradient-repeat-layout-wrapper">
  
  <p class="gradient-repeat-caption">⭕️ ストライプ柄を作るなら、色の「境界線の数値」をピッタリ合わせろ！</p>

  <div class="gradient-repeat-demo-area">
    
    <div class="gradient-repeat-item">
      <p class="gradient-repeat-label" style="color:#dc3545;">❌ 罠（普通に指定）<br><small>境界がボケてしまう</small></p>
      <!-- 💡 色の開始と終了を曖昧にするとボケる -->
      <div class="gradient-repeat-box is-bad-stripe"></div>
    </div>

    <div class="gradient-repeat-item">
      <p class="gradient-repeat-label" style="color:#0d6efd;">⭕️ 成功（数値調整）<br><small>くっきりストライプ！</small></p>
      <!-- 💡 同一の位置で色を切り替えるとくっきりする -->
      <div class="gradient-repeat-box is-good-stripe"></div>
    </div>

    <div class="gradient-repeat-item">
      <p class="gradient-repeat-label">repeating-radial<br><small>同心円の模様</small></p>
      <div class="gradient-repeat-box is-radial-pattern"></div>
    </div>

  </div>

  <div class="gradient-repeat-code-area">
    <span class="hl-comment">/* ❌ 色の位置をズラして指定してしまう */</span><br>
    <span class="hl-blue">.stripe-fail</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">repeating-linear-gradient(45deg, #f1c40f 10px, #333 20px);</span> <span class="hl-comment">/* 🚨 ボケる！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 前の色の「終わり」と次の色の「始まり」を同じ数値にする！ */</span><br>
    <span class="hl-blue">.stripe-success</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">repeating-linear-gradient(<br>
        45deg,<br>
        #f1c40f 0px 10px,</span> <span class="hl-comment">/* 💡 黄色は 0〜10px まで */</span><br>
        <span class="hl-red">#333 10px 20px</span>    <span class="hl-comment">/* 💡 黒は 10px からスタート！これでくっきり分かれる */</span><br>
      <span class="hl-red">);</span><br>
    }
  </div>

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

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

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

.gradient-repeat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 150px;
}

.gradient-repeat-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
  height: 40px;
}

.gradient-repeat-box {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* ＝❌ 罠：境界がボケるストライプ＝ */
.is-bad-stripe {
  background: repeating-linear-gradient(45deg, #f1c40f 10px, #333 20px);
}

/* ＝⭕️ 正解：くっきりとしたストライプ＝ */
.is-good-stripe {
  /* モダンなCSSでは [色 開始位置 終了位置] の省略記法が使えます */
  background: repeating-linear-gradient(
    45deg,
    #f1c40f 0px 10px,
    #333 10px 20px
  );
}

/* ＝💡 実践コード：repeating-radial-gradient＝ */
.is-radial-pattern {
  background: repeating-radial-gradient(
    circle,
    #3498db 0px 10px,
    #fff 10px 20px
  );
}

/* ＝コード解説エリア＝ */
.gradient-repeat-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;
}

グラデーションの色の指定と透明度のコントロール

グラデーションの美しさを決めるのは、色の選び方と色が変化していく過程です。

16進数（#HEX）やrgb()などの標準的なカラーコードで指定できますが、最新のCSSでは高度な色空間を扱うことも可能になりつつあります。

ここでは、実務で使われる3色以上のリッチなグラデーションの作り方と画像を美しく見せる「透明化グラデーション」のテクニックを解説します。

グラデーションの色の指定と透明度のコントロール
  • 3色・4色など複数色の指定とカラーパレット
  • transparentへのグラデーションと位置の調整

3色・4色など複数色の指定とカラーパレット

グラデーションは、2色だけでなく、3色や4色、それ以上の複数色をカンマ区切りで繋げていくことで、複雑でリッチな表現が可能になります。

実務においては、コーポレートカラーやブランドカラーに合わせて、滑らかで高級感のある多色グラデーションを作成することが求められます。

多色グラデーションを作る際は、「隣り合う色相で繋ぐか、間に『白』や『明るい同系色』を挟んで濁りを防ぐこと」です。

美しいカラーパレットジェネレーターなどを活用し、機械的なブレンドでも色が濁らない組み合わせを選ぶのがデザインの要です。

⭕️ 多色グラデーションは「色の選び方」で高級感が決まる！

❌ 罠（補色で濁る）
赤→緑→青

⭕️ 成功（3色）
ピンク→紫→青

⭕️ 成功（4色）
夕焼けパレット

/* ❌ 離れた色相を直接つなぐと、中間が濁る（グレーになる） */
.grad-fail {
  background: linear-gradient(to right, red, green, blue);
}

/* ⭕️ 3色グラデ（近い色相で繋ぐ） */
.grad-3color {
  background: linear-gradient(to bottom right, #ff0080, #7928ca, #0070f3);
}

/* ⭕️ 4色グラデ（トーンを合わせてリッチに） */
.grad-4color {
  background: linear-gradient(45deg, #2b5876, #4e4376, #b24592, #f15f79);
}
HTMLコード表示
<div class="gradient-color-layout-wrapper">
  
  <p class="gradient-color-caption">⭕️ 多色グラデーションは「色の選び方」で高級感が決まる！</p>

  <div class="gradient-color-demo-area">
    
    <div class="gradient-color-item">
      <p class="gradient-color-label" style="color:#dc3545;">❌ 罠（補色で濁る）<br><small>赤→緑→青</small></p>
      <!-- 💡 間に汚いグレーが生まれてしまう -->
      <div class="gradient-color-box is-bad-multi"></div>
    </div>

    <div class="gradient-color-item">
      <p class="gradient-color-label" style="color:#0d6efd;">⭕️ 成功（3色）<br><small>ピンク→紫→青</small></p>
      <!-- 💡 隣り合う色相なら美しく混ざる -->
      <div class="gradient-color-box is-good-3color"></div>
    </div>

    <div class="gradient-color-item">
      <p class="gradient-color-label" style="color:#0d6efd;">⭕️ 成功（4色）<br><small>夕焼けパレット</small></p>
      <!-- 💡 4色でも同系色ならリッチになる -->
      <div class="gradient-color-box is-good-4color"></div>
    </div>

  </div>

  <div class="gradient-color-code-area">
    <span class="hl-comment">/* ❌ 離れた色相を直接つなぐと、中間が濁る（グレーになる） */</span><br>
    <span class="hl-blue">.grad-fail</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to right, red, green, blue);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 3色グラデ（近い色相で繋ぐ） */</span><br>
    <span class="hl-blue">.grad-3color</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to bottom right, #ff0080, #7928ca, #0070f3);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 4色グラデ（トーンを合わせてリッチに） */</span><br>
    <span class="hl-blue">.grad-4color</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(45deg, #2b5876, #4e4376, #b24592, #f15f79);</span><br>
    }
  </div>

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

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

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

.gradient-color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 150px;
}

.gradient-color-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
  height: 40px;
}

.gradient-color-box {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ＝❌ 罠：色が濁る＝ */
.is-bad-multi {
  background: linear-gradient(to right, red, green, blue);
}

/* ＝⭕️ 正解：3色で美しく＝ */
.is-good-3color {
  background: linear-gradient(to bottom right, #ff0080, #7928ca, #0070f3);
}

/* ＝⭕️ 正解：4色でリッチに＝ */
.is-good-4color {
  background: linear-gradient(45deg, #2b5876, #4e4376, #b24592, #f15f79);
}

/* ＝コード解説エリア＝ */
.gradient-color-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;
}

.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; }

transparentへのグラデーションと位置の調整

「写真の上に白文字を乗せたいから、下側だけを黒くフェードアウトさせたい」といった、画像と組み合わせる透過グラデーションは、実務で使われるテクニックです。

白から透明や指定した色から透明に変化させるには、rgba()やtransparentキーワードを使います。

また、「上半分は透明で、下半分だけグラデーションをかけたい」という場合は、色の後に%をつけて位置を指定します。

これを利用して、くっきりとした境界線を作ることも可能です。

色から透明へグラデーションさせる際は、「transparentキーワードは極力使わず、rgba()を使い、RGBの数値を同じにしてアルファ値だけを0にすること」です。

例えば白から透明にしたいなら、linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0))と書きます。

これで、どのブラウザでも美しいフェードアウトが完成します。

⭕️ 透明化の罠「transparentは黒色」に注意せよ！

❌ 罠（透明化使用）
白から透明（中間が黒ずむ）

Text

⭕️ 成功（rgbaを使用）
美しい白フェード

Text

％で位置を調整
下50%からフェード開始

Text
/* ❌ 白から transparent にすると、中間が「透明な黒」に引っ張られて濁る */
.fade-fail {
  background: linear-gradient(to bottom, #ffffff, transparent);
}

/* ⭕️ 同じ色のまま、rgbaの透明度(0)を使ってフェードさせる！ */
.fade-success {
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* 💡 ％（位置）の活用：上半分は透明で、50%の位置から黒グラデを開始する */
.fade-position {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);
}
HTMLコード表示
<div class="gradient-trans-layout-wrapper">
  
  <p class="gradient-trans-caption">⭕️ 透明化の罠「transparentは黒色」に注意せよ！</p>

  <div class="gradient-trans-demo-area">
    
    <div class="gradient-trans-item">
      <p class="gradient-trans-label" style="color:#dc3545;">❌ 罠（透明化使用）<br><small>白から透明（中間が黒ずむ）</small></p>
      
      <!-- 💡 下地となる画像を用意 -->
      <div class="gradient-trans-bg">
        <!-- 💡 悪いグラデーションを重ねる -->
        <div class="gradient-trans-overlay is-bad-transparent"></div>
        <span class="gradient-trans-text">Text</span>
      </div>
    </div>

    <div class="gradient-trans-item">
      <p class="gradient-trans-label" style="color:#0d6efd;">⭕️ 成功（rgbaを使用）<br><small>美しい白フェード</small></p>
      
      <div class="gradient-trans-bg">
        <div class="gradient-trans-overlay is-good-rgba"></div>
        <span class="gradient-trans-text">Text</span>
      </div>
    </div>

    <div class="gradient-trans-item">
      <p class="gradient-trans-label">％で位置を調整<br><small>下50%からフェード開始</small></p>
      
      <div class="gradient-trans-bg">
        <div class="gradient-trans-overlay is-position-percent"></div>
        <span class="gradient-trans-text">Text</span>
      </div>
    </div>

  </div>

  <div class="gradient-trans-code-area">
    <span class="hl-comment">/* ❌ 白から transparent にすると、中間が「透明な黒」に引っ張られて濁る */</span><br>
    <span class="hl-blue">.fade-fail</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to bottom, #ffffff, transparent);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 同じ色のまま、rgbaの透明度(0)を使ってフェードさせる！ */</span><br>
    <span class="hl-blue">.fade-success</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));</span><br>
    }<br><br>

    <span class="hl-comment">/* 💡 ％（位置）の活用：上半分は透明で、50%の位置から黒グラデを開始する */</span><br>
    <span class="hl-blue">.fade-position</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);</span><br>
    }
  </div>

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

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

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

.gradient-trans-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 150px;
}

.gradient-trans-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
  height: 40px;
}

/* 画像を想定した下地ブロック */
.gradient-trans-bg {
  position: relative;
  width: 120px;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  /* 視認しやすいように風景画像を使用 */
  background-image: url('https://picsum.photos/id/1015/120/160');
  background-size: cover;
  background-position: center;
}

/* グラデーションを重ねる用の絶対配置ブロック */
.gradient-trans-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 上に乗せるテキスト */
.gradient-trans-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
  z-index: 10;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 文字が読みやすいように */
}

/* ＝❌ 罠：transparentを使用してグレーに濁る（ブラウザによっては黒ずむ）＝ */
/* ※この濁りを再現するために、あえて少し暗い色から transparent にしています */
.is-bad-transparent {
  background: linear-gradient(to bottom, #ffffff, transparent);
}

/* ＝⭕️ 正解：rgbaで同じ色のまま透明度だけ下げる＝ */
.is-good-rgba {
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* ＝💡 実践コード：％で位置を指定して、途中からグラデを開始する＝ */
.is-position-percent {
  /* 0%から50%までは完全な透明（画像そのまま）、50%から下にかけて黒くなる */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);
}

/* ＝コード解説エリア＝ */
.gradient-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;
}

要素別！グラデーションを使ったデザインの実装

Webデザインにおいて、グラデーションは背景だけでなく、テキストや枠線、ボタンといった様々な要素を魅力的に見せる強力なツールです。

ギャラリーサイトなどで見かける洗練されたグラデーションの実装例や生成ツールから出力される要素をプロジェクトで使いこなすには、要素ごとの特性を理解する必要があります。

ここでは、背景のグラデーション例にとどまらず、テキスト、枠線、画像、影といった「要素別」のグラデーション実装テクニックと現場で役立つテクニックを解説します。

要素別！グラデーションを使ったデザインの実装
  • テキストや下線にグラデーションをかける
  • 枠線にグラデーションを適用する
  • 背景画像の上にグラデーションを重ねる
  • ボタンや影のグラデーション装飾

テキストや下線にグラデーションをかける

文字そのものの色やテキストの装飾である下線をグラデーションにする手法は、見出しや強調したいキーワードを目立たせる際に有効です。

テキストをグラデーションにする場合、文字自体にグラデーションを適用するのではなく、「背景をグラデーションにして文字の形でくり抜く」というアプローチをとります。

テキストをグラデーションにする際は、「ベースとなるcolorを指定した上で、下書きを上書きするようにグラデーションをかけること」です。

また、グラデーションの下線を引く場合はborderではなくbackground-imageを使い、background-sizeとbackground-positionで線の太さと位置をコントロールするのが文字との被りを防ぐ実装方法です。

⭕️ テキストと下線にグラデーションをかけるCSS

美しいグラデーション文字

ここはグラデーションの下線が引かれたテキストです。

/* ⭕️ テキストをグラデーションでくり抜く */
.text-grad {
  display: inline-block; /* 💡 背景幅を文字幅に合わせるための重要ポイント！ */
  background: linear-gradient(45deg, #ff0080, #ff8c00); /* 1. 背景に色を敷く */
  -webkit-background-clip: text; /* 2. 背景を文字の形でくり抜く */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* 3. 元の文字色を透明にする */
  color: transparent;
}

/* ⭕️ グラデーション下線（borderは使わない！） */
.underline-grad {
  background-image: linear-gradient(to right, #0dccea, #0d70ea);
  background-repeat: no-repeat;
  background-position: bottom left; /* 💡 背景画像を一番下に配置 */
  background-size: 100% 4px; /* 💡 横幅100%、太さ4pxの線にする */
  padding-bottom: 4px; /* 💡 文字と線の間隔をあける */
}
HTMLコード表示
<div class="text-grad-layout-wrapper">
  
  <p class="text-grad-caption">⭕️ テキストと下線にグラデーションをかけるCSS</p>

  <div class="text-grad-demo-area">
    
    <!-- 💡 グラデーションテキスト -->
    <div style="text-align: center; margin-bottom: 30px;">
      <span class="grad-text-title">美しいグラデーション文字</span>
    </div>

    <!-- 💡 グラデーション下線 -->
    <p class="grad-underline-text">
      ここは<span class="grad-underline">グラデーションの下線</span>が引かれたテキストです。
    </p>

  </div>

  <!-- 💡 エディタ画面風の解説エリア -->
  <div class="text-grad-code-area">
    <span class="hl-comment">/* ⭕️ テキストをグラデーションでくり抜く */</span><br>
    <span class="hl-blue">.text-grad</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">inline-block;</span> <span class="hl-comment">/* 💡 背景幅を文字幅に合わせるための重要ポイント！ */</span><br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(45deg, #ff0080, #ff8c00);</span> <span class="hl-comment">/* 1. 背景に色を敷く */</span><br>
      <span class="hl-green">-webkit-background-clip:</span> <span class="hl-red">text;</span> <span class="hl-comment">/* 2. 背景を文字の形でくり抜く */</span><br>
      <span class="hl-green">background-clip:</span> <span class="hl-red">text;</span><br>
      <span class="hl-green">-webkit-text-fill-color:</span> <span class="hl-red">transparent;</span> <span class="hl-comment">/* 3. 元の文字色を透明にする */</span><br>
      <span class="hl-green">color:</span> <span class="hl-red">transparent;</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ グラデーション下線（borderは使わない！） */</span><br>
    <span class="hl-blue">.underline-grad</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">linear-gradient(to right, #0dccea, #0d70ea);</span><br>
      <span class="hl-green">background-repeat:</span> <span class="hl-red">no-repeat;</span><br>
      <span class="hl-green">background-position:</span> <span class="hl-red">bottom left;</span> <span class="hl-comment">/* 💡 背景画像を一番下に配置 */</span><br>
      <span class="hl-green">background-size:</span> <span class="hl-red">100% 4px;</span> <span class="hl-comment">/* 💡 横幅100%、太さ4pxの線にする */</span><br>
      <span class="hl-green">padding-bottom:</span> <span class="hl-red">4px;</span> <span class="hl-comment">/* 💡 文字と線の間隔をあける */</span><br>
    }
  </div>

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

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

.text-grad-demo-area {
  background-color: #fff;
  padding: 40px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  text-align: center;
}

/* ＝⭕️ 実践：テキストグラデーション＝ */
.grad-text-title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.4;
  /* 💡 テーマのCSSに負けないための指定 */
  display: inline-block; 
  background: linear-gradient(45deg, #ff0080, #ff8c00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ＝⭕️ 実践：グラデーション下線＝ */
.grad-underline-text {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  line-height: 2;
}

.grad-underline {
  /* 背景としてグラデーションを設定 */
  background-image: linear-gradient(to right, #0dccea, #0d70ea);
  /* 背景の繰り返しを無効化 */
  background-repeat: no-repeat;
  /* 線の位置を一番下にする */
  background-position: bottom left;
  /* 線の太さを指定（横幅100%、高さ4px） */
  background-size: 100% 4px;
  /* 文字と下線の間に少し余白を持たせる */
  padding-bottom: 4px;
}

/* ＝コード解説エリア（エディタ風）＝ */
.text-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;
}

.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; }

下線やbackground-imageの使い方を詳しく知りたい人は以下から一読ください。

枠線にグラデーションを適用する

要素の枠線にグラデーションを適用する場合、標準プロパティのborder-imageを使用して実装するのが一般的です。

例えば、3色のグラデーション枠線も簡単に作れます。

しかし、現代のWebデザインにおいて「角丸（border-radius）」は必須です。

角丸のグラデーション枠線を作るには、「border-imageを捨てbackgroundを2層重ねてbackground-clipで制御すること」です。

背景色とグラデーションの2つの背景を指定し、内側の背景はpadding-boxでくり抜き、外側のグラデーションはborder-boxまで広げることで、border-radiusを保ったまま角丸グラデーション枠線を実現できます。

⭕️ 角丸のグラデーション枠線は「background-clip」の裏技を使え！

❌ border-imageの罠
(角が丸くならない)
⭕️ 角丸グラデ枠線
(2層の背景で実現)
/* ❌ border-imageを使うと角丸が効かない */
.border-fail {
  border-radius: 16px;
  border: 4px solid;
  border-image: linear-gradient(to right, #f12711, #f5af19) 1; /* 🚨 角が直角になる！ */
}

/* ⭕️ background-clipを使って背景を2層にする */
.border-success {
  border: 4px solid transparent; /* 💡 枠線の太さだけ透明で確保 */
  border-radius: 16px; /* 💡 ここで角丸を指定 */
  background-image:
    linear-gradient(#fff, #fff), /* 💡 1層目：内側の背景色（白） */
    linear-gradient(to right, #11998e, #38ef7d); /* 💡 2層目：枠線のグラデ */
  background-clip: padding-box, border-box; /* 💡 1層目は内側、2層目は枠まで！ */
  background-origin: border-box;
}
HTMLコード表示
<div class="border-grad-layout-wrapper">
  
  <p class="border-grad-caption">⭕️ 角丸のグラデーション枠線は「background-clip」の裏技を使え！</p>

  <div class="border-grad-demo-area">
    
    <!-- ❌ 失敗：border-imageを使うと角丸が効かない -->
    <div class="grad-border-fail">
      ❌ border-imageの罠<br>
      <span style="font-size: 12px; font-weight: normal;">(角が丸くならない)</span>
    </div>

    <!-- ⭕️ 成功：background-clipを使った裏技 -->
    <div class="grad-border-success">
      ⭕️ 角丸グラデ枠線<br>
      <span style="font-size: 12px; font-weight: normal;">(2層の背景で実現)</span>
    </div>

  </div>

  <!-- 💡 エディタ画面風の解説エリア -->
  <div class="border-grad-code-area">
    <span class="hl-comment">/* ❌ border-imageを使うと角丸が効かない */</span><br>
    <span class="hl-blue">.border-fail</span> {<br>
      <span class="hl-green">border-radius:</span> <span class="hl-red">16px;</span><br>
      <span class="hl-green">border:</span> <span class="hl-red">4px solid;</span><br>
      <span class="hl-green">border-image:</span> <span class="hl-red">linear-gradient(to right, #f12711, #f5af19) 1;</span> <span class="hl-comment">/* 🚨 角が直角になる！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ background-clipを使って背景を2層にする */</span><br>
    <span class="hl-blue">.border-success</span> {<br>
      <span class="hl-green">border:</span> <span class="hl-red">4px solid transparent;</span> <span class="hl-comment">/* 💡 枠線の太さだけ透明で確保 */</span><br>
      <span class="hl-green">border-radius:</span> <span class="hl-red">16px;</span> <span class="hl-comment">/* 💡 ここで角丸を指定 */</span><br>
      <span class="hl-green">background-image:</span> <br>
        <span class="hl-red">linear-gradient(#fff, #fff),</span> <span class="hl-comment">/* 💡 1層目：内側の背景色（白） */</span><br>
        <span class="hl-red">linear-gradient(to right, #11998e, #38ef7d);</span> <span class="hl-comment">/* 💡 2層目：枠線のグラデ */</span><br>
      <span class="hl-green">background-clip:</span> <span class="hl-red">padding-box, border-box;</span> <span class="hl-comment">/* 💡 1層目は内側、2層目は枠まで！ */</span><br>
      <span class="hl-green">background-origin:</span> <span class="hl-red">border-box;</span><br>
    }
  </div>

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

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

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

/* ＝❌ 罠：border-imageを使用（角が直角になる）＝ */
.grad-border-fail {
  width: 200px;
  padding: 30px 10px;
  background-color: #fff;
  font-weight: bold;
  color: #333;
  text-align: center;
  /* border-radiusを指定しても... */
  border-radius: 16px;
  /* border-imageを使うと角が四角くなってしまう */
  border: 4px solid;
  border-image: linear-gradient(to right, #f12711, #f5af19) 1;
}

/* ＝⭕️ 正解：角丸グラデ枠線＝ */
.grad-border-success {
  width: 200px;
  padding: 30px 10px;
  font-weight: bold;
  color: #333;
  text-align: center;
  /* 枠線の太さを透明なborderとして確保 */
  border: 4px solid transparent;
  /* 💡 角丸をしっかり指定 */
  border-radius: 16px;
  /* 💡 背景を2層指定する（1番目が中身の色、2番目がグラデーション枠線の色） */
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #11998e, #38ef7d);
  /* 💡 1番目（白）はpadding領域まで、2番目（グラデ）はborder領域まで広げる */
  background-clip: padding-box, border-box;
  /* 💡 グラデーションの起点をborder領域に合わせる */
  background-origin: border-box;
}

/* ＝コード解説エリア（エディタ風）＝ */
.border-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;
}

.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のbackgroundプロパティの「マルチバックグラウンド（複数背景指定）」機能を利用し、画像とグラデーションを同時に指定します。

CSSのbackgroundの複数指定のルールは、「手前（上層）に表示したいものほど、左側（先）に記述すること」です。

つまり、画像の上にグラデーションを重ねたい場合はlinear-gradient(...)を先に書き、カンマ（,）で区切ってからurl(...)を書くのが正解です。

また、グラデーションにはrgba()を使い、半透明にして下の画像を透かす必要があります。

⭕️ 背景画像にグラデーションを重ねる時は「書く順番」が命！

❌ 罠（画像を先に記述）
グラデが下敷きになり消滅

白文字が
読みにくい

⭕️ 成功（グラデを先に記述）
画像の上に暗いフェードが乗る

白文字が
くっきり読める
/* ❌ url() を先に書いてしまう */
.overlay-fail {
  background-image:
    url(‘image.jpg’), /* 🚨 画像が一番手前（上）のレイヤーになる！ */
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* 🚨 下敷きになって見えない */
}

/* ⭕️ 手前に見せたい「グラデーション」を必ず先に書く！ */
.overlay-success {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%), /* 💡 これが上層 */
    url(‘image.jpg’); /* 💡 これが下層（背景画像） */
}
HTMLコード表示
<div class="overlay-grad-layout-wrapper">
  
  <p class="overlay-grad-caption">⭕️ 背景画像にグラデーションを重ねる時は「書く順番」が命！</p>

  <div class="overlay-grad-demo-area">
    
    <!-- ❌ 失敗：画像(url)を先に書いてしまった罠 -->
    <div class="overlay-grad-item">
      <p class="overlay-grad-label" style="color:#dc3545;">❌ 罠（画像を先に記述）<br><small>グラデが下敷きになり消滅</small></p>
      
      <div class="bg-overlay-box is-overlay-fail">
        <span class="overlay-text">白文字が<br>読みにくい</span>
      </div>
    </div>

    <!-- ⭕️ 成功：グラデーションを先に書いている -->
    <div class="overlay-grad-item">
      <p class="overlay-grad-label" style="color:#0d6efd;">⭕️ 成功（グラデを先に記述）<br><small>画像の上に暗いフェードが乗る</small></p>
      
      <div class="bg-overlay-box is-overlay-success">
        <span class="overlay-text">白文字が<br>くっきり読める</span>
      </div>
    </div>

  </div>

  <!-- 💡 エディタ画面風の解説エリア -->
  <div class="overlay-grad-code-area">
    <span class="hl-comment">/* ❌ url() を先に書いてしまう */</span><br>
    <span class="hl-blue">.overlay-fail</span> {<br>
      <span class="hl-green">background-image:</span> <br>
        <span class="hl-red">url('image.jpg'),</span> <span class="hl-comment">/* 🚨 画像が一番手前（上）のレイヤーになる！ */</span><br>
        <span class="hl-red">linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9));</span> <span class="hl-comment">/* 🚨 下敷きになって見えない */</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> <br>
        <span class="hl-red">linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%),</span> <span class="hl-comment">/* 💡 これが上層 */</span><br>
        <span class="hl-red">url('image.jpg');</span> <span class="hl-comment">/* 💡 これが下層（背景画像） */</span><br>
    }
  </div>

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

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

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

.overlay-grad-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200px;
}

.overlay-grad-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.5;
  height: 40px;
}

/* 共通のオーバーレイボックス設定 */
.bg-overlay-box {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end; /* 文字を下側に配置 */
  justify-content: center;
  padding-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  /* 背景画像のサイズと位置を揃える */
  background-size: cover;
  background-position: center;
}

.overlay-text {
  color: white;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ＝❌ 罠：画像(url)を先に書いてしまった＝ */
.is-overlay-fail {
  /* 画像が一番上のレイヤーになり、後ろの黒グラデーションが完全に隠れる */
  background-image: 
    url('https://picsum.photos/id/1015/300/200'),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
}

/* ＝⭕️ 正解：グラデーションを先に書く＝ */
.is-overlay-success {
  /* 手前に見せたいグラデーションを先に書き、カンマで区切って画像を記述する */
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%),
    url('https://picsum.photos/id/1015/300/200');
}

/* ＝コード解説エリア（エディタ風）＝ */
.overlay-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;
}

.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; }

ボタンや影のグラデーション装飾

グラデーションを使ったボタンは、立体感や華やかさを演出するのに最適です。

ボタン自体の背景をグラデーションにするのは簡単ですが、一歩進んだモダンなデザインとして、「影自体もグラデーションにする」という発光エフェクトが流行しています。

グラデーションの影を作るには、「影用のプロパティを諦め、疑似要素（::beforeや::after）を活用すること」です。

ボタンと同じ形・同じグラデーションを持たせた疑似要素を作り、z-index: -1でボタンの背後に潜り込ませます。

そして、疑似要素に対してfilter: blur()をかけることで、「グラデーションの影」が落ちているかのようなリッチな発光表現が可能になります。

⭕️ 影をグラデーションにするなら「疑似要素＋blur」の裏技を使え！

/* ❌ box-shadowにグラデーションを直接指定しようとする */
.btn-fail {
  box-shadow: 0 10px 20px linear-gradient(to right, #4facfe, #00f2fe); /* 🚨 無効！影にグラデは使えない */
}

/* ⭕️ 疑似要素(::after)を使って、ぼかしたコピーを背後に配置する！ */
.btn-glow {
  position: relative;
  z-index: 1; /* 💡 本体の重なり順を上にする */
  background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.btn-glow::after {
  content: “”;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; /* 💡 本体と全く同じ大きさに広げる */
  background-image: inherit; /* 💡 本体と同じグラデーション色を継承 */
  filter: blur(15px); /* 💡 グラデーションをぼかして影にする */
  z-index: -1; /* 💡 本体の背後に隠す */
  transform: translateY(5px); /* 💡 少し下にずらして自然な影を演出 */
}
HTMLコード表示
<div class="shadow-grad-layout-wrapper">
  
  <p class="shadow-grad-caption">⭕️ 影をグラデーションにするなら「疑似要素＋blur」の裏技を使え！</p>

  <div class="shadow-grad-demo-area">
    
    <!-- 💡 通常の単色シャドウ -->
    <div class="shadow-grad-item">
      <button class="grad-btn-standard">
        通常のグラデボタン<br>
        <span style="font-size: 11px; font-weight: normal;">(単色の影)</span>
      </button>
    </div>

    <!-- ⭕️ 成功：疑似要素を使った発光グラデーションシャドウ -->
    <div class="shadow-grad-item">
      <button class="grad-btn-glow">
        発光グラデボタン<br>
        <span style="font-size: 11px; font-weight: normal;">(疑似要素の影)</span>
      </button>
    </div>

  </div>

  <!-- 💡 エディタ画面風の解説エリア -->
  <div class="shadow-grad-code-area">
    <span class="hl-comment">/* ❌ box-shadowにグラデーションを直接指定しようとする */</span><br>
    <span class="hl-blue">.btn-fail</span> {<br>
      <span class="hl-green">box-shadow:</span> <span class="hl-red">0 10px 20px linear-gradient(to right, #4facfe, #00f2fe);</span> <span class="hl-comment">/* 🚨 無効！影にグラデは使えない */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 疑似要素(::after)を使って、ぼかしたコピーを背後に配置する！ */</span><br>
    <span class="hl-blue">.btn-glow</span> {<br>
      <span class="hl-green">position:</span> <span class="hl-red">relative;</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(135deg, #4facfe 0%, #00f2fe 100%);</span><br>
    }<br><br>
    
    <span class="hl-blue">.btn-glow::after</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">top:</span> <span class="hl-red">0;</span> <span class="hl-green">left:</span> <span class="hl-red">0;</span> <span class="hl-green">width:</span> <span class="hl-red">100%;</span> <span class="hl-green">height:</span> <span class="hl-red">100%;</span> <span class="hl-comment">/* 💡 本体と全く同じ大きさに広げる */</span><br>
      <span class="hl-green">background-image:</span> <span class="hl-red">inherit;</span> <span class="hl-comment">/* 💡 本体と同じグラデーション色を継承 */</span><br>
      <span class="hl-green">filter:</span> <span class="hl-red">blur(15px);</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>
      <span class="hl-green">transform:</span> <span class="hl-red">translateY(5px);</span> <span class="hl-comment">/* 💡 少し下にずらして自然な影を演出 */</span><br>
    }
  </div>

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

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

/* 発光が目立つようにデモエリアはダークトーンに */
.shadow-grad-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: center;
  background-color: #212529; 
  padding: 50px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.shadow-grad-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 220px;
}

/* ＝ボタン共通リセット＝ */
.grad-btn-standard,
.grad-btn-glow {
  appearance: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
  color: white;
  padding: 15px 30px;
  border-radius: 30px;
  font-family: inherit;
  width: 100%;
}

/* ＝通常のグラデーションボタン＝ */
.grad-btn-standard {
  /* 通常の単色シャドウ */
  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
  background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  transition: transform 0.3s;
}
.grad-btn-standard:hover {
  transform: translateY(-2px);
}

/* ＝⭕️ グラデーションシャドウ（発光ボタン）＝ */
.grad-btn-glow {
  /* 💡 疑似要素の基準位置とするため relative を指定 */
  position: relative;
  /* ベースの背景グラデーション */
  background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  /* 重なり順を調整するためのコンテキスト作成 */
  z-index: 1;
}

/* 影の役割を果たす疑似要素 */
.grad-btn-glow::after {
  content: "";
  /* 💡 ボタンと全く同じ大きさに広げる */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 💡 本体と同じグラデーションを指定 */
  background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  /* 💡 角丸も本体に合わせる */
  border-radius: 30px;
  /* 💡 グラデーションをぼかすことで影にする */
  filter: blur(15px);
  /* 少し下にずらすと影っぽさが増す */
  transform: translateY(5px);
  /* 💡 本体の背後に隠す */
  z-index: -1;
  /* アニメーション用 */
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

/* ホバー時に影を強くする演出 */
.grad-btn-glow:hover {
  transform: translateY(-2px);
}
.grad-btn-glow:hover::after {
  opacity: 1;
  transform: translateY(7px);
  filter: blur(20px);
}

/* ＝コード解説エリア（エディタ風）＝ */
.shadow-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;
}

.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; }

疑似要素や影に関する設定・使い方を詳しく知りたい人は以下から一読ください。

アニメーションとホバーエフェクト

グラデーションは静的な装飾にとどまりません。

色がゆったりと変化し続ける動的な背景やマウスを乗せたときにフワッと別の色に変わるボタンなどは、サイトをワンランク上のモダンな印象に引き上げます。

ここでは、実務で直面する「グラデーションが動かない！滑らかに変化しない！」という問題を回避し、アニメーションを実装するテクニックを解説します。

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

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

色が移り変わる動くグラデーション背景は、近年のWebデザインで人気のある表現です。

これを実装する際、「グラデーションのコードを書いて@keyframesで動かす」というアプローチをとります。

グラデーションを動かすには、「グラデーションのサイズ（background-size）を要素の200%〜400%程度に大きく広げ、広大な背景の『表示位置（background-position）』をアニメーションでズラしていくこと」です。

窓枠から巨大な風景を上下左右に動かすようなイメージで実装することで、ブラウザでも滑らかで美しい色の変化を生み出せます。

⭕️ グラデーションは「色」を変えるのではなく「位置」を動かせ！

❌ 罠（色をアニメーション）
滑らかに動かずパッと切り替わる

⭕️ 成功（位置を動かす）
美しく滑らかなループアニメーション

/* ❌ keyframesでグラデーションの色を直接変えようとする */
@keyframes colorChange {
  0% { background: linear-gradient(red, blue); }
  100% { background: linear-gradient(blue, green); } /* 🚨 CSSではグラデの色補完はできない！ */
}

/* ⭕️ 背景を巨大化させて、位置(position)をズラす！ */
.bg-move {
  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%; /* 💡 背景を要素の4倍の大きさに広げる */
  animation: gradientMove 10s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; } /* 💡 見える位置をズラすことで色が動いて見える */
  100% { background-position: 0% 50%; }
}
HTMLコード表示
<div class="anim-grad-layout-wrapper">
  
  <p class="anim-grad-caption">⭕️ グラデーションは「色」を変えるのではなく「位置」を動かせ！</p>

  <div class="anim-grad-demo-area">
    
    <!-- ❌ 失敗：色自体をkeyframesで変えようとする -->
    <div class="anim-grad-item">
      <p class="anim-grad-label" style="color:#dc3545;">❌ 罠（色をアニメーション）<br><small>滑らかに動かずパッと切り替わる</small></p>
      <div class="anim-grad-box is-anim-fail"></div>
    </div>

    <!-- ⭕️ 成功：サイズを広げて位置を動かす -->
    <div class="anim-grad-item">
      <p class="anim-grad-label" style="color:#0d6efd;">⭕️ 成功（位置を動かす）<br><small>美しく滑らかなループアニメーション</small></p>
      <div class="anim-grad-box is-anim-success"></div>
    </div>

  </div>

  <!-- 💡 エディタ画面風の解説エリア -->
  <div class="anim-grad-code-area">
    <span class="hl-comment">/* ❌ keyframesでグラデーションの色を直接変えようとする */</span><br>
    <span class="hl-blue">@keyframes colorChange</span> {<br>
      <span class="hl-green">0%</span> { <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(red, blue);</span> }<br>
      <span class="hl-green">100%</span> { <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(blue, green);</span> } <span class="hl-comment">/* 🚨 CSSではグラデの色補完はできない！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 背景を巨大化させて、位置(position)をズラす！ */</span><br>
    <span class="hl-blue">.bg-move</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);</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><br>
    }<br><br>

    <span class="hl-blue">@keyframes gradientMove</span> {<br>
      <span class="hl-green">0%</span> { <span class="hl-green">background-position:</span> <span class="hl-red">0% 50%;</span> }<br>
      <span class="hl-green">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-green">100%</span> { <span class="hl-green">background-position:</span> <span class="hl-red">0% 50%;</span> }<br>
    }
  </div>

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

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

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

.anim-grad-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 220px;
}

.anim-grad-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.5;
  height: 40px;
}

.anim-grad-box {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ＝❌ 罠：色自体をアニメーションさせようとする＝ */
.is-anim-fail {
  animation: colorChangeFail 2s infinite alternate;
}
@keyframes colorChangeFail {
  0% { background: linear-gradient(to right, #ff0080, #ff8c00); }
  100% { background: linear-gradient(to right, #00c6ff, #0072ff); }
  /* 滑らかに変わらず、2秒後に突然青に変わる */
}

/* ＝⭕️ 正解：サイズを広げて位置を動かす＝ */
.is-anim-success {
  background: linear-gradient(45deg, #ff0080, #ff8c00, #00c6ff, #0072ff);
  background-size: 400% 400%; /* 💡 ここがキモ！ */
  animation: gradientMoveSuccess 6s ease infinite;
}
@keyframes gradientMoveSuccess {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ＝コード解説エリア（エディタ風）＝ */
.anim-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;
}

.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】アニメーションの作り方：コピペで使えるおしゃれサンプル集」を一読ください。

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

transitionを使ったホバー時の滑らかな色変化

ボタンにマウスを乗せた時に、別のグラデーションへと滑らかに色を変化させるのは、ユーザーのクリックを促すマイクロインタラクションとして定番です。

グラデーションをホバーで滑らかに変化させるには、変化後のグラデーションを持たせた疑似要素（::before）を上に被せておき、ホバー時に疑似要素のopacityを0から1へとtransitionさせることです。

不透明度のアニメーションであればブラウザの描画負荷も軽く、どのブラウザでも滑らかなフェード変化を実現できます。

⭕️ ホバーでグラデを変えるなら「疑似要素のopacity」を動かせ！

/* ❌ backgroundにtransitionをかけてしまう */
.btn-fail {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  transition: all 0.3s ease; /* 🚨 背景画像には効かない！ */
}
.btn-fail:hover {
  background: linear-gradient(to right, #f12711, #f5af19); /* 🚨 瞬間的に切り替わる */
}

/* ⭕️ 疑似要素にホバー後の色を持たせ、透明度(opacity)を動かす */
.btn-success {
  position: relative;
  background: linear-gradient(to right, #00c6ff, #0072ff);
}

.btn-success::before {
  content: “”;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to right, #f12711, #f5af19); /* 💡 ホバー後の色 */
  opacity: 0; /* 💡 初期状態は透明にして隠す */
  transition: opacity 0.3s ease; /* 💡 opacityにtransitionをかける！ */
}

.btn-success:hover::before {
  opacity: 1; /* 💡 ホバー時にフワッと浮かび上がらせる */
}
HTMLコード表示
<div class="hover-grad-layout-wrapper">
  
  <p class="hover-grad-caption">⭕️ ホバーでグラデを変えるなら「疑似要素のopacity」を動かせ！</p>

  <div class="hover-grad-demo-area">
    
    <!-- ❌ 失敗：背景を直接transitionで変えようとする -->
    <div class="hover-grad-item">
      <button class="grad-btn is-hover-fail">
        ❌ transitionの罠<br>
        <span style="font-size: 11px; font-weight: normal;">(パッと変わる)</span>
      </button>
    </div>

    <!-- ⭕️ 成功：疑似要素のopacityを操作する -->
    <div class="hover-grad-item">
      <button class="grad-btn is-hover-success">
        ⭕️ 疑似要素でフェード<br>
        <span style="font-size: 11px; font-weight: normal;">(フワッと変わる)</span>
      </button>
    </div>

  </div>

  <!-- 💡 エディタ画面風の解説エリア -->
  <div class="hover-grad-code-area">
    <span class="hl-comment">/* ❌ backgroundにtransitionをかけてしまう */</span><br>
    <span class="hl-blue">.btn-fail</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to right, #00c6ff, #0072ff);</span><br>
      <span class="hl-green">transition:</span> <span class="hl-red">all 0.3s ease;</span> <span class="hl-comment">/* 🚨 背景画像には効かない！ */</span><br>
    }<br>
    <span class="hl-blue">.btn-fail:hover</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to right, #f12711, #f5af19);</span> <span class="hl-comment">/* 🚨 瞬間的に切り替わる */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 疑似要素にホバー後の色を持たせ、透明度(opacity)を動かす */</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:</span> <span class="hl-red">linear-gradient(to right, #00c6ff, #0072ff);</span><br>
    }<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">top:</span> <span class="hl-red">0;</span> <span class="hl-green">left:</span> <span class="hl-red">0;</span> <span class="hl-green">width:</span> <span class="hl-red">100%;</span> <span class="hl-green">height:</span> <span class="hl-red">100%;</span><br>
      <span class="hl-green">background:</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">/* 💡 opacityにtransitionをかける！ */</span><br>
    }<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コード表示
.hover-grad-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

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

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

.hover-grad-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 220px;
}

/* ボタン共通リセット */
.grad-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
  color: white;
  padding: 15px 30px;
  border-radius: 30px;
  font-family: inherit;
  width: 100%;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ＝❌ 罠：backgroundを直接変更＝ */
.is-hover-fail {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  transition: all 0.3s ease; /* 🚨 効かない */
}
.is-hover-fail:hover {
  background: linear-gradient(to right, #f12711, #f5af19);
}

/* ＝⭕️ 正解：疑似要素のopacityを変更＝ */
.is-hover-success {
  position: relative; /* 疑似要素の基準 */
  background: linear-gradient(to right, #00c6ff, #0072ff);
  overflow: hidden; /* 角丸からはみ出ないように */
  z-index: 1; /* 文字を下敷きにしないためのコンテキスト */
}

/* 疑似要素にホバー後のグラデーションを持たせる */
.is-hover-success::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to right, #f12711, #f5af19);
  opacity: 0; /* 💡 初期は透明 */
  transition: opacity 0.5s ease; /* 💡 透明度をアニメーション */
  z-index: -1; /* 文字の背後に回す */
}

/* ホバー時に疑似要素を表示 */
.is-hover-success:hover::before {
  opacity: 1; /* 💡 フワッと色が浮かび上がる */
}

/* ＝コード解説エリア（エディタ風）＝ */
.hover-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;
}

.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; }

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

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

効かない・滑らかにならない時のトラブル解決

例えば、「正しい構文で書いたはずなのに線形グラデーションが効かない！」と焦ることは、実務でもよくあります。

まずはスペルミスやカンマの抜け落ちを疑い、ブラウザの開発者ツールでプロパティが打ち消されていないか確認しましょう。

複雑なグラデーションを作る際は、無料の確認ツールなどを活用して、コードが正しく動作するか事前にチェックするのがおすすめです。

しかし、構文が合っていても「描画の仕様」によって発生してしまう、厄介なトラブルも存在します。

ここでは、初心者から中級者にかけて多くの人が悩まされる「グラデーションが滑らかにならない問題」の解決策を解説します。

効かない・滑らかにならない時のトラブル解決
  • バンディングをノイズで滑らかにする

バンディングをノイズで滑らかにする

グラデーションを実装した際、「色が綺麗に混ざらず、等高線のような縞模様になってしまう」という現象に直面することがあります。

特に、似たような暗い色同士や、広範囲にわたるグラデーションで発生しがちです。

これを解決するモダンなデザイン手法として、細かいノイズを上に被せて質感を加えるテクニックが注目されています。

例えば、バンディングを消して質感を出すには、「SVGで生成した微細なノイズ画像（またはノイズエフェクト）をマルチバックグラウンドを使ってグラデーションの手前に重ねること」です。

ノイズの「ザラザラ感」が視覚的な錯覚を生み出し、縞模様を打ち消すと同時に、アナログで高級感のある質感を演出してくれます。

⭕️ のっぺりしたグラデーション（縞模様）は「ノイズ」を重ねて質感を上げろ！

❌ 罠（そのまま指定）
のっぺりして縞が出やすい

グラデのみ
(ツルッとしている)

⭕️ 成功（ノイズを重ねる）
質感が加わり縞が消える

ノイズ追加
(ザラッとした質感！)
/* ❌ そのまま敷くとのっぺりしてバンディング（縞模様）を起こす */
.grad-banding {
  background: linear-gradient(to bottom right, #8E2DE2, #4A00E0);
}

/* ⭕️ ノイズ画像（SVG）を手前に重ねてディザリング効果（質感）を狙う！ */
.grad-noise {
  background-image:
    /* 💡 1層目：半透明のノイズSVG（Data URIで直接記述）※opacityでノイズの強さを調整 */
    url(“data:image/svg+xml,%3Csvg viewBox=’0 0 200 200′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.75′ numOctaves=’3′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noise)’ opacity=’0.25’/%3E%3C/svg%3E”),
    /* 💡 2層目：ベースとなるグラデーション */
    linear-gradient(to bottom right, #8E2DE2, #4A00E0);
}
HTMLコード表示
<div class="noise-grad-layout-wrapper">
  
  <p class="noise-grad-caption">⭕️ のっぺりしたグラデーション（縞模様）は「ノイズ」を重ねて質感を上げろ！</p>

  <div class="noise-grad-demo-area">
    
    <!-- ❌ 失敗：普通のグラデーション（のっぺりして縞が出やすい） -->
    <div class="noise-grad-item">
      <p class="noise-grad-label" style="color:#dc3545;">❌ 罠（そのまま指定）<br><small>のっぺりして縞が出やすい</small></p>
      
      <div class="grad-banding-box is-bad-banding">
        <span class="noise-text">グラデのみ<br><small>(ツルッとしている)</small></span>
      </div>
    </div>

    <!-- ⭕️ 成功：ノイズ（SVG）を重ねてザラッとした質感に -->
    <div class="noise-grad-item">
      <p class="noise-grad-label" style="color:#0d6efd;">⭕️ 成功（ノイズを重ねる）<br><small>質感が加わり縞が消える</small></p>
      
      <div class="grad-banding-box is-good-noise">
        <span class="noise-text">ノイズ追加<br><small>(ザラッとした質感！)</small></span>
      </div>
    </div>

  </div>

  <!-- 💡 エディタ画面風の解説エリア -->
  <div class="noise-grad-code-area">
    <span class="hl-comment">/* ❌ そのまま敷くとのっぺりしてバンディング（縞模様）を起こす */</span><br>
    <span class="hl-blue">.grad-banding</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">linear-gradient(to bottom right, #8E2DE2, #4A00E0);</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ ノイズ画像（SVG）を手前に重ねてディザリング効果（質感）を狙う！ */</span><br>
    <span class="hl-blue">.grad-noise</span> {<br>
      <span class="hl-green">background-image:</span> <br>
        <span class="hl-comment">/* 💡 1層目：半透明のノイズSVG（Data URIで直接記述）※opacityでノイズの強さを調整 */</span><br>
        <span class="hl-red">url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.25'/%3E%3C/svg%3E"),</span><br>
        <span class="hl-comment">/* 💡 2層目：ベースとなるグラデーション */</span><br>
        <span class="hl-red">linear-gradient(to bottom right, #8E2DE2, #4A00E0);</span><br>
    }
  </div>

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

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

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

.noise-grad-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 220px;
}

.noise-grad-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.5;
  height: 40px;
}

/* ボックス共通設定 */
.grad-banding-box {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 💡 箱の中のテキスト装飾 */
.noise-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 視認性を高める影 */
}

.noise-text small {
  font-size: 12px;
  font-weight: normal;
  opacity: 0.9;
}

/* ＝❌ 罠：そのままのグラデーション（のっぺりしている）＝ */
.is-bad-banding {
  background-image: linear-gradient(to bottom right, #8E2DE2, #4A00E0);
}

/* ＝⭕️ 正解：SVGノイズを重ねてザラッとした質感を加える＝ */
.is-good-noise {
  background-image: 
    /* 💡 SVGフィルターを使ったノイズをData URIで手前に敷く（opacityを0.25にして分かりやすく） */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"),
    /* 💡 後ろにベースのグラデーションを敷く */
    linear-gradient(to bottom right, #8E2DE2, #4A00E0);
}

/* ＝コード解説エリア（エディタ風）＝ */
.noise-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;
}

.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種類
    直線的なlinear-gradient、円形に広がるradial-gradient、扇形に展開するconic-gradientが存在する。
  • 繰り返しの表現
    各関数の先頭にrepeating-を付与することでストライプや幾何学模様などを実装できる。
  • 方向・角度の指定
    to rightやto bottom rightなどの方向、または45degなどの角度でコントロールする。
  • 色の調整と濁り防止
    3色以上使う場合は色相を合わせる。
    透明化にはtransparentではなくrgba()のアルファ値を使用して中間色の黒ずみを防ぐ。
  • テキストへの適用
    background-clip: textとcolor: transparentを組み合わせ、背景のグラデーションで文字の形をくり抜く。
  • 角丸枠線への適用
    border-imageは角丸（border-radius）に非対応のため、background-clipを用いて背景を2層に重ねて実装する。
  • 画像とのオーバーレイ
    背景画像の上にグラデーションを重ねる場合は、手前に表示するグラデーションを先に記述する。
  • アニメーション
    グラデーションの色自体はアニメーションできないため、background-sizeを拡大し、background-positionの位置を動かすことで実現する。
  • ホバーエフェクト
    ホバー時の滑らかな色変化はtransitionではなく、疑似要素のopacityを操作してフェードさせる。
  • バンディング（縞模様）対策
    描画の限界で縞模様が発生する場合は、SVG等で作成した微細なノイズ画像を手前に半透明で重ね、ディザリング効果で滑らかに見せる。

よくある質問（FAQ）

CSSでグラデーションを作るにはどうすればいいですか？

CSSでグラデーションを作成するには、backgroundまたはbackground-imageプロパティに対し、linear-gradient()やradial-gradient()などの関数を指定します。

基本的な線形グラデーションは、background: linear-gradient(色1, 色2);のように、開始色と終了色をカンマで区切って記述するだけで実装できます。

テキストにグラデーションをかけるにはどうすればいいですか？

文字自体にグラデーションをかけるには、以下の3つのプロパティを組み合わせるテクニックが一般的です。

  1. background-image: linear-gradient(...);（背景にグラデーションを指定）
  2. -webkit-background-clip: text;（背景を文字の形でくり抜く）
  3. -webkit-text-fill-color: transparent;（元の文字色を透明にして背景を透かす）
linear-gradientとradial-gradientの違いは何ですか？

色が変化していく「形状」が異なります。

  • linear-gradient（線形）
    上から下、左から右、斜めなど、直線方向に沿って色が変化します。
    角度や方向を指定できます。
  • radial-gradient（円形/放射状）
    中心点から外側に向かって、円または楕円を描くように放射状に色が変化します。
グラデーションの方向や角度を変えるにはどうすればいいですか？

linear-gradient()の最初の引数に、方向または角度を指定します。

  • 方向で指定
    to right（左から右へ）、to bottom right（左上から右下へ）など。
  • 角度で指定
    45deg（45度傾ける）、90deg（水平）など、deg（ディグリー）という単位を使って細かく調整できます。
    指定しない場合はデフォルトで「上から下（180deg）」になります。
枠線にグラデーションを適用できますか？

はい、可能です。

直角の枠線であればborder-imageプロパティを使ってborder-image: linear-gradient(...) 1;のように指定できます。

ただし、border-radiusと併用したい場合はborder-imageが効かないため、要素の背景を2層にし、background-clipプロパティを使って枠線のように見せるのが実務では使われます。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

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

関連記事

目次