MENU
  1. ホーム
  2. CSS
  3. 【CSS】グラデーションの作り方：文字・背景・枠線・アニメーション

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

CSS
css-gradient

CSSグラデーションは、画像を使わずにWebサイトへ豊かな色彩と立体感をもたらす、モダンデザインに不可欠なスタイリング技術です。

本記事では、背景や文字への基本的な指定方法、角丸枠線との両立、ユーザーを惹きつけるアニメーション実装を解説します。

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

CSS | Code Stock
目次

CSSグラデーションの基本：背景への指定

Webサイトの背景やボタンに色の変化や奥行きをもたらす「CSSグラデーション」があります。

画像を使わずにグラデーションを表現できるため、ページの表示速度向上や後からの修正の手軽さから、Webデザインには欠かせない技術です。

グラデーション背景を設定したい場合、知っておくべきことがあります。

グラデーションを指定する際は、background-imageプロパティ、もしくは背景の一括指定であるbackgroundプロパティを使用してください。

実務ではコードが短く済むbackground: linear-gradient(...);の書き方が標準です。

CSSグラデーションの基本：背景への指定
  • 線形（linear-gradient）と円形（radial-gradient）の違い
  • 2色・3色の指定とカラーコードの調整方法

線形（linear-gradient）と円形（radial-gradient）の違い

CSSグラデーションには、大きく分けて直線的に色が変化する「線形グラデーション（linear-gradient）」、中心から外側へ広がる「円形グラデーション（radial-gradient）」の2種類が存在します。

線形グラデーションでは、何も指定しないと上から下に色が変化します。

向きを斜めにしたい場合などは、方向（to right bottomなど）や角度（45deg）をカッコの最初に指定します。

「右下へ」などの方向指定（to right bottom）は直感的ですが、実務の現場では「角度」でコントロールすることがほとんどです。

角度を指定する場合はdeg（degree=度数）を使用します。

時計の12時の方向（下から上）が0deg、時計回りに3時の方向（左から右）が90deg、斜めが45degや135degになると覚えておきましょう。

1. 線形（linear）：左から右へ（90deg）

線形グラデーション

2. 円形（radial）：中心から外側へ

円形グラデーション
/* 💡 線形（左から右へ 90度の角度を指定） */
.box-linear {
  background: linear-gradient(90deg, #0d6efd, #20c997);
}

/* 💡 円形（中心から外側へ） */
.box-radial {
  background: radial-gradient(circle, #0d6efd, #20c997);
}
HTMLコード表示
<div class="grad-sec1-wrapper">
  
  <p class="grad-caption">1. 線形（linear）：左から右へ（90deg）</p>
  <div class="grad-box grad-linear">線形グラデーション</div>

  <p class="grad-caption" style="margin-top: 20px;">2. 円形（radial）：中心から外側へ</p>
  <div class="grad-box grad-radial">円形グラデーション</div>

  <div class="grad-code">
    /* 💡 線形（左から右へ 90度の角度を指定） */<br>
    <span class="hl-blue">.box-linear</span> {<br>
      <span class="hl-red">background: linear-gradient(90deg, #0d6efd, #20c997);</span><br>
    }<br><br>

    /* 💡 円形（中心から外側へ） */<br>
    <span class="hl-blue">.box-radial</span> {<br>
      <span class="hl-red">background: radial-gradient(circle, #0d6efd, #20c997);</span><br>
    }
  </div>

</div>
CSSコード表示
.grad-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.grad-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.grad-box {
  color: #fff;
  padding: 40px 20px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  border-radius: 8px;
}

/* 1. 線形グラデーション */
.grad-linear {
  /* 💡 90deg は左から右への変化を意味します */
  background: linear-gradient(90deg, #0d6efd, #20c997);
}

/* 2. 円形グラデーション */
.grad-radial {
  /* 💡 circle を指定すると正円で広がります */
  background: radial-gradient(circle, #0d6efd, #20c997);
}

.grad-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }

2色・3色の指定とカラーコードの調整方法

グラデーションの基本は2色ですが、カンマで区切って色を追加するだけで、3色やそれ以上の複雑なグラデーションを作れます。

色はHEX値（#から始まるカラーコード）、rgb()、rgba()など、CSSで使える全ての色の指定方法が使用可能です。

また、色の後ろにスペースを空けて%を指定することで、「どの位置でその色にするか（カラーストップ）」を調整できます。

色から透明へグラデーションさせる場合は、transparentという単語を使わないでください。

代わりに「開始色と同じRGB値」で、アルファ値（透明度）だけを0にしたrgba()を終了色に指定します。

これによって、色が途中で濁ることなく、透明へと溶け込むグラデーションが実現できます。

1. 3色のグラデーション（位置も％で指定）

ピンク(0%) → 紫(50%) → 青(100%)

2. 濁らない「透明」へのグラデーション

青から透明へ（背景が透ける）
/* 💡 1. 3色の指定と位置のコントロール */
.box-3colors {
  background: linear-gradient(135deg, #d63384 0%, #6f42c1 50%, #0d6efd 100%);
}

/* 💡 2. 透明への美しいフェードアウト（黒ずみ防止） */
.box-fadeout {
  /* ❌ 失敗例： background: linear-gradient(to right, #0d6efd, transparent); */

  /* ⭕️ 正解例： 開始色(#0d6efd)のRGB値のまま、透明度を0にする */
  background: linear-gradient(to right, rgba(13, 110, 253, 1), rgba(13, 110, 253, 0));
}
HTMLコード表示
<div class="grad-sec2-wrapper">
  
  <p class="grad-caption">1. 3色のグラデーション（位置も％で指定）</p>
  <div class="grad-box grad-3colors">ピンク(0%) → 紫(50%) → 青(100%)</div>

  <p class="grad-caption" style="margin-top: 20px;">2. 濁らない「透明」へのグラデーション</p>
  <div class="grad-bg-pattern">
    <div class="grad-box grad-fadeout">青から透明へ（背景が透ける）</div>
  </div>

  <div class="grad-code">
    /* 💡 1. 3色の指定と位置のコントロール */<br>
    <span class="hl-blue">.box-3colors</span> {<br>
      <span class="hl-red">background: linear-gradient(135deg, #d63384 0%, #6f42c1 50%, #0d6efd 100%);</span><br>
    }<br><br>

    /* 💡 2. 透明への美しいフェードアウト（黒ずみ防止） */<br>
    <span class="hl-blue">.box-fadeout</span> {<br>
      <span class="hl-comment">/* ❌ 失敗例： background: linear-gradient(to right, #0d6efd, transparent); */</span><br>
    <br>
      <span class="hl-comment">/* ⭕️ 正解例： 開始色(#0d6efd)のRGB値のまま、透明度を0にする */</span><br>
      <span class="hl-red">background: linear-gradient(to right, rgba(13, 110, 253, 1), rgba(13, 110, 253, 0));</span><br>
    }
  </div>

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

/* 1. 3色とカラーストップ（位置指定） */
.grad-3colors {
  /* 斜め（135度）に、ピンク→紫→青へと変化 */
  background: linear-gradient(135deg, #d63384 0%, #6f42c1 50%, #0d6efd 100%);
}

/* 2. 背景の市松模様（グラデーションの透け具合を確認するため） */
.grad-bg-pattern {
  background-image: repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), repeating-linear-gradient(45deg, #ccc 25%, #fff 25%, #fff 75%, #ccc 75%, #ccc);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  border-radius: 8px;
}

/* 2. 濁らない透明グラデーション */
.grad-fadeout {
  /* #0d6efd は rgba(13, 110, 253, 1) と同じ色。右側でアルファ値を0にする */
  background: linear-gradient(to right, rgba(13,110,253,1), rgba(13,110,253,0));
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 文字を見やすくする */
}

文字にグラデーションをかける方法

Webデザインにおいて、キャンペーンのキャッチコピーや特設サイトの巨大な見出しをリッチに目立たせたい時、文字にグラデーションを適用するテクニックは効果的です。

かつてはPhotoshopなどで画像として作成するしかありませんでしたが、現在ではCSSだけで文字色のグラデーションを実装できます。

ここでは、背景の切り抜きを利用した仕組みと実務で使えるデザインサンプルを解説します。

文字にグラデーションをかける方法
  • background-clipを使った文字色グラデーションの作り方
  • 実用サンプル：ゴールド文字やInstagram風デザイン

background-clipを使った文字色グラデーションの作り方

文字そのものにグラデーションのプロパティは存在しません。

どうやって実装するのかというと、要素の背景にグラデーションを敷き、その背景を『文字の形に切り抜く』というアプローチをとります。

これを行うのがbackground-clip: text;というプロパティです。

文字にグラデーションをかける際は、以下の3行をセットで記述してください。

また、現代のブラウザであっても互換性を高めるために-webkit-のベンダープレフィックスを付けるのが実務の標準です。

  1. background: linear-gradient(...);
    背景にグラデーションを敷く
  2. -webkit-background-clip: text;
    背景を文字の形で切り抜く
  3. -webkit-text-fill-color: transparent;もしくはcolor: transparent;
    手前の文字色を透明にして、奥の背景を見せる

❌ 失敗：文字色が不透明だと背景が見えない

グラデーションが見えません

⭕️ 正解：文字を透明にして切り抜く

美しいグラデーション文字
/* ❌ 文字が邪魔をしている */
.wrong-text {
  background: linear-gradient(to right, #0d6efd, #20c997);
  -webkit-background-clip: text;
  /* 💡 color: transparent; が書き忘れられている！ */
}

/* ⭕️ 3行セットで記述する */
.correct-text {
  background: linear-gradient(to right, #0d6efd, #20c997); /* 1. 背景 */
  -webkit-background-clip: text; /* 2. 切り抜き */
  -webkit-text-fill-color: transparent; /* 3. 文字を透明に */
  color: transparent; /* (フォールバックとして併記) */
}
HTMLコード表示
<div class="text-grad-sec1-wrapper">
  
  <p class="text-grad-caption">❌ 失敗：文字色が不透明だと背景が見えない</p>
  <div class="text-grad-wrong">グラデーションが見えません</div>

  <p class="text-grad-caption" style="margin-top: 20px;">⭕️ 正解：文字を透明にして切り抜く</p>
  <div class="text-grad-correct">美しいグラデーション文字</div>

  <div class="text-grad-code">
    /* ❌ 文字が邪魔をしている */<br>
    <span class="hl-blue">.wrong-text</span> {<br>
      <span class="hl-green">background: linear-gradient(to right, #0d6efd, #20c997);</span><br>
      <span class="hl-green">-webkit-background-clip: text;</span><br>
      <span class="hl-comment">/* 💡 color: transparent; が書き忘れられている！ */</span><br>
    }<br><br>

    /* ⭕️ 3行セットで記述する */<br>
    <span class="hl-blue">.correct-text</span> {<br>
      <span class="hl-red">background: linear-gradient(to right, #0d6efd, #20c997);</span> /* 1. 背景 */<br>
      <span class="hl-red">-webkit-background-clip: text;</span> /* 2. 切り抜き */<br>
      <span class="hl-red">-webkit-text-fill-color: transparent;</span> /* 3. 文字を透明に */<br>
      <span class="hl-green">color: transparent;</span> /* (フォールバックとして併記) */<br>
    }
  </div>

</div>
CSSコード表示
.text-grad-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.text-grad-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* ❌ 失敗例 */
.text-grad-wrong {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(to right, #0d6efd, #20c997);
  -webkit-background-clip: text;
  /* color: transparent; が無い状態 */
}

/* ⭕️ 成功例 */
.text-grad-correct {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  /* 1. 背景を敷く */
  background: linear-gradient(to right, #0d6efd, #20c997);
  /* 2. 文字の形で切り抜く */
  -webkit-background-clip: text;
  background-clip: text;
  /* 3. 手前の文字色を透明にする */
  -webkit-text-fill-color: transparent;
  color: transparent; 
}

.text-grad-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

実用サンプル：ゴールド文字やInstagram風デザイン

文字グラデーションの仕組みを理解したところで、実務の現場で使われる「CSSグラデーションサンプル」を2つ紹介します。

1つ目は、高級感やランキング1位の表記などで頻出する「ゴールドグラデーション文字」です。

2つ目は、SNS風のモダンなデザインで人気の「インスタグラムグラデーション」です。

グラデーション文字を使用する際は、背景色とのコントラスト（明度差）を確保してください。

明るいグラデーション文字を使う場合は、背景を黒や暗い色にするか、もし白背景で使うならグラデーション全体のトーンを「暗めのブラウン寄り」に調整するのがよいです。

1. 高級感のあるゴールドグラデーション

Premium Quality

2. Instagram風の鮮やかなグラデーション

#FollowMe
/* 💡 ゴールドグラデーションの配色 */
.text-gold {
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 💡 Instagram風グラデーションの配色 */
.text-insta {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
HTMLコード表示
<div class="text-grad-sec2-wrapper">
  
  <p class="text-grad-caption">1. 高級感のあるゴールドグラデーション</p>
  <div class="text-grad-bg-dark">
    <div class="text-grad-gold">Premium Quality</div>
  </div>

  <p class="text-grad-caption" style="margin-top: 30px;">2. Instagram風の鮮やかなグラデーション</p>
  <div class="text-grad-bg-light">
    <div class="text-grad-insta">#FollowMe</div>
  </div>

  <div class="text-grad-code">
    /* 💡 ゴールドグラデーションの配色 */<br>
    <span class="hl-blue">.text-gold</span> {<br>
      <span class="hl-red">background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);</span><br>
      <span class="hl-green">-webkit-background-clip: text;</span><br>
      <span class="hl-green">-webkit-text-fill-color: transparent;</span><br>
    }<br><br>

    /* 💡 Instagram風グラデーションの配色 */<br>
    <span class="hl-blue">.text-insta</span> {<br>
      <span class="hl-red">background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);</span><br>
      <span class="hl-green">-webkit-background-clip: text;</span><br>
      <span class="hl-green">-webkit-text-fill-color: transparent;</span><br>
    }
  </div>

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

/* 1. ゴールド文字用の暗い背景 */
.text-grad-bg-dark {
  background-color: #212529;
  padding: 30px;
  border-radius: 4px;
  text-align: center;
}

/* ゴールドグラデーションの実装 */
.text-grad-gold {
  font-size: 32px;
  font-weight: bold;
  font-family: 'Times New Roman', serif; /* ゴールドに合うセリフ体 */
  /* 複雑な金属の反射を表現する多色グラデーション */
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 2. インスタ風文字用の背景 */
.text-grad-bg-light {
  background-color: #fff;
  border: 1px solid #ced4da;
  padding: 30px;
  border-radius: 4px;
  text-align: center;
}

/* Instagram風グラデーションの実装 */
.text-grad-insta {
  font-size: 36px;
  font-weight: 900;
  font-family: sans-serif;
  /* インスタのブランドカラーを模した斜めグラデーション */
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

枠線とボタンのグラデーション装飾

Webデザインにおいて、単なる背景だけでなく「枠線グラデーション」や「グラデーションボタン」を実装できるようになると、UIのクオリティが向上します。

しかし、いざグラデーションの線を引こうとしたり、ボタンにリッチな効果をつけようとすると、思い通りに動かないCSSの仕様の壁にぶつかることがあります。

ここでは、実務で直面する角丸との両立問題の解決策とグラデーションボタンの作り方を解説します。

枠線とボタンのグラデーション装飾
  • グラデーションの枠線と角丸を両立する
  • 押したくなる！美しいグラデーションボタンの作成

グラデーションの枠線と角丸を両立する

通常、枠線にグラデーションをかけるにはborder-imageプロパティを使いますが、このプロパティを使用するとborder-radius（角丸）が無視され、角が直角になるCSSの仕様があります。

HTML構造を変えずに「角丸のグラデーション枠線」を実現するには、擬似要素（::beforeまたは::after）を活用します。

要素自身の背景色で中身を塗りつぶし、その裏側に「要素より数ピクセルだけ大きく、グラデーションが塗られた擬似要素」を配置することで、はみ出た部分が角丸グラデーションの枠線として機能します。

これなら既存のHTMLを汚さずに実装可能です。

HTMLを汚さずに「角丸グラデーション枠」を作る

角丸とグラデーションが両立しています
/* 💡 本体の設定 */
.rounded-box {
  position: relative; /* 擬似要素の基準点 */
  z-index: 1; /* 💡 追記：グラデーションが奥に突き抜けるのを防ぐバリア */
  background-color: #ffffff; /* 中身を白で塗りつぶす */
  border-radius: 10px; /* ここで角丸を指定 */
  background-clip: padding-box; /* 背景の透過漏れを防ぐ */
  border: 4px solid transparent; /* 💡 線の太さ分の透明な枠を確保 */
}

/* 💡 裏側に配置するグラデーション要素 */
.rounded-box::before {
  content: “”;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* ぴったり合わせる */
  z-index: -1; /* 💡 本体の裏側に隠す */
  margin: -4px; /* 💡 透明な枠線（4px）の分だけ外側に広げる */
  border-radius: inherit; /* 💡 本体の角丸を引き継ぐ */
  background: linear-gradient(135deg, #0d6efd, #20c997); /* 枠線のグラデ色 */
}
HTMLコード表示
<div class="grad-border-wrapper">
  
  <p class="grad-border-caption">HTMLを汚さずに「角丸グラデーション枠」を作る</p>
  
  <div class="grad-rounded-box">
    角丸とグラデーションが両立しています
  </div>

  <div class="grad-border-code">
    /* 💡 本体の設定 */<br>
    <span class="hl-blue">.rounded-box</span> {<br>
      <span class="hl-green">position: relative;</span> /* 擬似要素の基準点 */<br>
      <span class="hl-red">z-index: 1;</span> /* 💡 追記：グラデーションが奥に突き抜けるのを防ぐバリア */<br>
      <span class="hl-green">background-color: #ffffff;</span> /* 中身を白で塗りつぶす */<br>
      <span class="hl-green">border-radius: 10px;</span> /* ここで角丸を指定 */<br>
      <span class="hl-green">background-clip: padding-box;</span> /* 背景の透過漏れを防ぐ */<br>
      <span class="hl-green">border: 4px solid transparent;</span> /* 💡 線の太さ分の透明な枠を確保 */<br>
    }<br><br>

    /* 💡 裏側に配置するグラデーション要素 */<br>
    <span class="hl-blue">.rounded-box::before</span> {<br>
      <span class="hl-green">content: "";</span><br>
      <span class="hl-green">position: absolute;</span><br>
      <span class="hl-green">top: 0; right: 0; bottom: 0; left: 0;</span> /* ぴったり合わせる */<br>
      <span class="hl-green">z-index: -1;</span> /* 💡 本体の裏側に隠す */<br>
      <span class="hl-green">margin: -4px;</span> /* 💡 透明な枠線（4px）の分だけ外側に広げる */<br>
      <span class="hl-green">border-radius: inherit;</span> /* 💡 本体の角丸を引き継ぐ */<br>
      <span class="hl-red">background: linear-gradient(135deg, #0d6efd, #20c997);</span> /* 枠線のグラデ色 */<br>
    }
  </div>

</div>
CSSコード表示
.grad-border-wrapper {
  background-color: #f8f9fa;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.grad-border-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

/* 💡 本体の設定 */
.grad-rounded-box {
  position: relative;
  z-index: 1; 
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  color: #333;
  /* 線の太さ分、透明なborderを確保して領域を作る */
  border: 4px solid transparent;
  background-clip: padding-box;
}

/* 💡 裏側に敷くグラデーション */
.grad-rounded-box::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* 💡 z-index: 1; の要素の裏側に配置される */
  z-index: -1; 
  /* 透明なborderの分だけ外に広げる */
  margin: -4px; 
  /* 親の角丸を引き継ぐ */
  border-radius: inherit; 
  /* 色がハッキリと見えるように鮮やかな色に変更 */
  background: linear-gradient(135deg, #0d6efd, #20c997);
}

.grad-border-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 30px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }

押したくなる！美しいグラデーションボタンの作成

コンバージョン（CV）を高めるために、メインのCTAボタンをグラデーションで目立たせるのは有効な施策です。

手軽にコードを取得できる「グラデーションジェネレーター」を利用するのも良いですが、仕組みを理解していないとホバー（マウスオーバー）時のアニメーションで痛い目を見ます。

グラデーションボタンを滑らかにホバーアニメーションさせるには、背景のサイズ（background-size）を予めボタン幅の200%以上に大きくしておき、ホバー時に背景の位置（background-position）をスライドさせるというテクニックを使います。

background-positionはアニメーション可能なため、リッチでスムーズなグラデーションの色の変化を表現できます。

ホバーするとグラデーションが「横に流れる」美しいボタン

/* 💡 ボタンのベース設定 */
.animated-btn {
  display: inline-block;
  padding: 15px 40px;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;

  /* 💡 ここが魔法のタネ */
  background: linear-gradient(to right, #f83600 0%, #f9d423 50%, #f83600 100%);
  background-size: 200% auto; /* 背景を2倍の幅にしておく */
  transition: 0.5s; /* 滑らかな動きを指定 */
}

/* 💡 ホバー時の設定 */
.animated-btn:hover {
  background-position: right center; /* 💡 背景の位置をスライドさせる */
}
HTMLコード表示
<div class="grad-btn-wrapper">
  
  <p class="grad-border-caption">ホバーするとグラデーションが「横に流れる」美しいボタン</p>
  
  <div style="text-align: center; padding: 20px 0;">
    <a href="#" class="grad-animated-btn">お問い合わせはこちら</a>
  </div>

  <div class="grad-border-code">
    /* 💡 ボタンのベース設定 */<br>
    <span class="hl-blue">.animated-btn</span> {<br>
      <span class="hl-green">display: inline-block;</span><br>
      <span class="hl-green">padding: 15px 40px;</span><br>
      <span class="hl-green">border-radius: 50px;</span><br>
      <span class="hl-green">color: #fff;</span><br>
      <span class="hl-green">text-decoration: none;</span><br>
    <br>
      <span class="hl-comment">/* 💡 ここが魔法のタネ */</span><br>
      <span class="hl-red">background: linear-gradient(to right, #f83600 0%, #f9d423 50%, #f83600 100%);</span><br>
      <span class="hl-red">background-size: 200% auto;</span> /* 背景を2倍の幅にしておく */<br>
      <span class="hl-green">transition: 0.5s;</span> /* 滑らかな動きを指定 */<br>
    }<br><br>

    /* 💡 ホバー時の設定 */<br>
    <span class="hl-blue">.animated-btn:hover</span> {<br>
      <span class="hl-red">background-position: right center;</span> /* 💡 背景の位置をスライドさせる */<br>
    }
  </div>

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

/* 💡 アニメーションするグラデーションボタン */
.grad-animated-btn {
  display: inline-block;
  padding: 18px 50px;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  
  /* 3つの色で構成（最初と最後を同じ色系統にするのがコツ） */
  background: linear-gradient(to right, #ff416c 0%, #ff4b2b 50%, #ff416c 100%);
  
  /* 💡 背景サイズを2倍（200%）に引き伸ばす */
  background-size: 200% auto;
  
  /* 位置の変更を0.5秒かけて滑らかにアニメーションさせる */
  transition: all 0.5s ease;
}

/* ホバー時の挙動 */
.grad-animated-btn:hover {
  /* 💡 見えている背景位置を右側にスライドさせる */
  background-position: right center;
  box-shadow: 0 6px 20px rgba(255, 65, 108, 0.4);
  transform: translateY(-2px); /* 少し浮き上がるエフェクト */
}

画像との組み合わせ：透過とオーバーレイ

Webデザインにおいて画像の上に文字を載せる際、そのままでは画像が明るすぎたり複雑だったりして文字が読めないことが多々あります。

そこで必須となるのが透過やオーバーレイの技術です。

画像にグラデーションを組み合わせることで、画像の色味を調整したり、特定の部分だけを暗くして視認性を確保したりできます。

画像との組み合わせ：透過とオーバーレイ
  • 背景画像の上に半透明のグラデーションを重ねる
  • CSSマスクで画像を徐々に透過させる

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

実務で最も頻出するのが、背景画像の上に薄い黒のグラデーションを敷き、その上に白い文字を載せるレイアウトです。

これは背景画像にグラデーションを重ねる手法で、background-imageプロパティにカンマ区切りで複数の指定を記述することで実現します。

画像にグラデーション透過を使う際は、 linear-gradient（オーバーレイ層）を先に書き、その後にurl()（画像層）を記述してください。

また、単に暗くするだけでなく、ロゴの色に合わせたブランドカラーを薄く重ねることで、サイト全体の統一感を出すのがよいです。

❌ グラデーションなし：背景が明るくて白文字が読めない

Title Text

背景の明るさや複雑さに負けてしまい、文字が非常に読みづらい状態です。

⭕️ 正解：半透明のカラーグラデーション（画像も文字も美しく共存）

Brand Color Overlay

紫〜青のグラデーションに透明度を持たせて重ねることで、エモい雰囲気を出しつつ文字をクッキリ見せます。

/* 💡 ポイント：ブランドカラーのRGB値に透明度（アルファ値）を持たせて重ねる */
.overlay-card-correct {
  background-image:
    /* 紫(透明度85%) から 青(透明度60%) への斜めグラデーション */
    linear-gradient(135deg, rgba(111, 66, 193, 0.85) 0%, rgba(13, 110, 253, 0.6) 100%),
    url(‘https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=800&auto=format&fit=crop’);
  display: flex;
  align-items: flex-end; /* テキストを下部に配置 */
}
HTMLコード表示
<div class="img-grad-sec1-wrapper">
  
  <p class="img-caption">❌ グラデーションなし：背景が明るくて白文字が読めない</p>
  <div class="overlay-card-wrong">
    <div class="overlay-content">
      <div>Title Text</div>
      <p>背景の明るさや複雑さに負けてしまい、文字が非常に読みづらい状態です。</p>
    </div>
  </div>

  <p class="img-caption" style="margin-top: 30px;">⭕️ 正解：半透明のカラーグラデーション（画像も文字も美しく共存）</p>
  <div class="overlay-card-correct">
    <div class="overlay-content">
      <div>Brand Color Overlay</div>
      <p>紫〜青のグラデーションに透明度を持たせて重ねることで、エモい雰囲気を出しつつ文字をクッキリ見せます。</p>
    </div>
  </div>

  <div class="img-grad-code">
    /* 💡 ポイント：ブランドカラーのRGB値に透明度（アルファ値）を持たせて重ねる */<br>
    <span class="hl-blue">.overlay-card-correct</span> {<br>
      <span class="hl-green">background-image:</span><br>
        <span class="hl-comment">/* 紫(透明度85%) から 青(透明度60%) への斜めグラデーション */</span><br>
        <span class="hl-red">linear-gradient(135deg, rgba(111, 66, 193, 0.85) 0%, rgba(13, 110, 253, 0.6) 100%),</span><br>
        <span class="hl-red">url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=800&auto=format&fit=crop');</span><br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">align-items: flex-end;</span> /* テキストを下部に配置 */<br>
    }
  </div>

</div>
CSSコード表示
.img-grad-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.img-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* 共通設定 */
.overlay-card-wrong, .overlay-card-correct {
  width: 100%;
  height: 250px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  display: flex;
  /* 文字を下部に配置する */
  align-items: flex-end; 
  padding: 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* 最低限の読みやすさを確保 */
}

.overlay-content h2 { 
  color: #fff; 
  margin: 0 0 5px 0; 
  font-size: 22px;
}
.overlay-content p {
  margin: 0;
  font-size: 14px;
}

/* ❌ グラデーションなし（画像のみ：サイバーパンク風の画像に変更） */
.overlay-card-wrong {
  background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=800&auto=format&fit=crop');
}

/* ⭕️ 正解のグラデーション（半透明のカラーをがっつり重ねる） */
.overlay-card-correct {
  /* 💡 手前に「紫(透明度85%)→青(透明度60%)」の半透明グラデーション、奥に画像 */
  background-image: 
    linear-gradient(135deg, rgba(111, 66, 193, 0.85) 0%, rgba(13, 110, 253, 0.6) 100%),
    url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=800&auto=format&fit=crop');
}

.img-grad-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 30px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

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

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

CSSマスクで画像を徐々に透過させる

画像にグラデーションをかける際に、画像そのものを徐々に消していく手法があります。

これにはmask-imageプロパティを使用します。

オーバーレイが「画像の上に色を載せる」のに対し、マスクは「画像そのものの透明度を変化させる」技術です。

背景色に溶け込むような画像配置をしたい場合、画像の下端をtransparentに向かうグラデーションマスクで処理すると、境界線が消えてモダンな印象になります。

実務では-webkit-mask-imageとmask-imageを併記するようにしましょう。

Nature
Gradually Fading…
/* 💡 ポイント：透明(transparent)に向かうグラデーションをマスクにする */
.masked-image {
  width: 100%;
  -webkit-mask-image:
    linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, black 50%, transparent 100%);
}
HTMLコード表示
<div class="img-grad-sec2-wrapper">
  <div class="mask-container">
    <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800&q=80" alt="Nature" class="masked-image">
    <div class="mask-text">Gradually Fading...</div>
  </div>

  <div class="img-grad-code">
    /* 💡 ポイント：透明(transparent)に向かうグラデーションをマスクにする */<br>
    <span class="hl-blue">.masked-image</span> {<br>
      <span class="hl-green">width: 100%;</span><br>
      <span class="hl-red">-webkit-mask-image:</span><br>
        <span class="hl-red">linear-gradient(to bottom, black 50%, transparent 100%);</span><br>
      <span class="hl-red">mask-image:</span><br>
        <span class="hl-red">linear-gradient(to bottom, black 50%, transparent 100%);</span><br>
    }<br>
  </div>
</div>
CSSコード表示
.img-grad-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.mask-container {
  position: relative;
  background-color: #f8f9fa; /* 背景色と同じにすると溶け込んで見える */
}
.masked-image {
  width: 100%;
  height: auto;
  display: block;
  /* 下に向かって透明になるマスク */
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.mask-text {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #333;
}

動く！グラデーションのアニメーション実装

Webサイトにおいてユーザーの目を釘付けにするのが「グラデーションアニメーション」です。

ただの静止画ではなく、背景がグラデーションで動くような没入感のある演出、文字にグラデーションアニメーションを取り入れることで、サイトのクオリティは一段と引き上がります。

ここでは、グラデーションアニメーションを実現する2つの主要なアプローチ（無限ループとホバー時のトランジション）について解説します。

動く！グラデーションのアニメーション実装
  • 背景色がゆっくり変化し続ける無限ループアニメーション
  • transitionを使ったホバー時の滑らかなグラデーション変化

背景色がゆっくり変化し続ける無限ループアニメーション

ヒーローヘッダー（トップページのメインビジュアル）などで、背景のグラデーションがオーロラのようにゆっくりと変化し続ける演出はモダンなWebデザインの定番です。

グラデーションを無限に動かすには、要素よりも大きいグラデーション背景（background-size: 400% 400%;など）を敷き、その背景の位置（background-position）を@keyframesで上下左右にゆっくりスライドさせるというトリックです。

見えている部分の奥で巨大な1枚のグラデーション画像が動くため、色が変化しているように見えます。

背景サイズを巨大にして「位置」をスライドさせる

Endless Gradient

背景がゆっくりと動き続けます

/* 💡 動くグラデーションの本体 */
.gradient-loop {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%; /* 💡 背景を要素の4倍に巨大化させる */
  animation: gradientMove 15s ease infinite; /* 💡 15秒かけて無限ループ */
}

/* 💡 背景の位置を動かすキーフレーム */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; } /* 奥で背景がスライドする */
  100% { background-position: 0% 50%; }
}
HTMLコード表示
<div class="anim-sec1-wrapper">
  
  <p class="anim-caption">背景サイズを巨大にして「位置」をスライドさせる</p>
  
  <div class="anim-gradient-loop">
    <div class="anim-text">Endless Gradient</div>
    <p>背景がゆっくりと動き続けます</p>
  </div>

  <div class="anim-code">
    /* 💡 動くグラデーションの本体 */<br>
    <span class="hl-blue">.gradient-loop</span> {<br>
      <span class="hl-red">background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);</span><br>
      <span class="hl-red">background-size: 400% 400%;</span> /* 💡 背景を要素の4倍に巨大化させる */<br>
      <span class="hl-green">animation: gradientMove 15s ease infinite;</span> /* 💡 15秒かけて無限ループ */<br>
    }<br><br>

    /* 💡 背景の位置を動かすキーフレーム */<br>
    <span class="hl-blue">@keyframes gradientMove</span> {<br>
      <span class="hl-green">0% { background-position: 0% 50%; }</span><br>
      <span class="hl-green">50% { background-position: 100% 50%; }</span> /* 奥で背景がスライドする */<br>
      <span class="hl-green">100% { background-position: 0% 50%; }</span><br>
    }
  </div>

</div>
CSSコード表示
.anim-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.anim-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* 💡 無限ループするグラデーション */
.anim-gradient-loop {
  height: 250px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  /* 4色を指定して複雑な色味にする */
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  /* 💡 魔法のタネ：要素の4倍のサイズにする */
  background-size: 400% 400%;
  /* 10秒かけてease（滑らか）に無限ループ */
  animation: gradientMove 10s ease infinite;
}

.anim-text {
  margin: 0 0 10px 0;
  font-size: 28px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 💡 スライドさせるアニメーション定義 */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.anim-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }

transitionを使ったホバー時の滑らかなグラデーション変化

ボタンにマウスを乗せた際、色を滑らかに変化させたい時に調べるのがtransitionです。

前章でも触れましたが、別のグラデーション（全く違う色）へフワッと変化させたい場合、background-positionのスライドだけでは対応しきれないケースがあります。

.btn {
  background: linear-gradient(red, yellow);
  transition: background 0.3s ease; /* ❌ 効かない！ */
}
.btn:hover {
  background: linear-gradient(blue, green); /* パカッと切り替わる */
}

繰り返しになりますが、グラデーションは画像扱いのため、transitionを使って「赤→青」のように中間の色をブラウザに自動計算（補完）させることはできません。

全く異なるグラデーションへ滑らかに（フワッと）変化させたい場合は、ホバー後のグラデーションを持った疑似要素（::before）をあらかじめ透明（opacity: 0;）にして上に重ねておき、ホバー時に透明度をopacity: 1; へとtransitionさせることです。

このopacityを使ったフェードインを使えば、複雑なグラデーション同士でも滑らかなアニメーションが実装可能です。

疑似要素の opacity を変化させて「全く違う色」へ滑らかに遷移する

/* 💡 ベースのボタン（ホバー前のグラデーション） */
.btn {
  position: relative;
  z-index: 1;
  background: linear-gradient(to right, #ff416c, #ff4b2b);
}

/* 💡 裏に潜ませる「ホバー後のグラデーション」 */
.btn::before {
  content: “”;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to right, #11998e, #38ef7d); /* 変化後の色 */
  opacity: 0; /* 💡 最初は完全に透明にしておく */
  transition: opacity 0.5s ease; /* 💡 透明度に対してアニメーションをかける */
}

/* 💡 ホバー時に透明度を1にして、上の色を浮き上がらせる */
.btn:hover::before {
  opacity: 1;
}
HTMLコード表示
<div class="anim-sec2-wrapper">
  
  <p class="anim-caption">疑似要素の opacity を変化させて「全く違う色」へ滑らかに遷移する</p>
  
  <div style="text-align: center; padding: 20px 0;">
    <button class="anim-fade-btn">ホバーでフワッと変化</button>
  </div>

  <div class="anim-code">
    /* 💡 ベースのボタン（ホバー前のグラデーション） */<br>
    <span class="hl-blue">.btn</span> {<br>
      <span class="hl-green">position: relative;</span><br>
      <span class="hl-green">z-index: 1;</span><br>
      <span class="hl-red">background: linear-gradient(to right, #ff416c, #ff4b2b);</span><br>
    }<br><br>

    /* 💡 裏に潜ませる「ホバー後のグラデーション」 */<br>
    <span class="hl-blue">.btn::before</span> {<br>
      <span class="hl-green">content: "";</span><br>
      <span class="hl-green">position: absolute;</span><br>
      <span class="hl-green">top: 0; right: 0; bottom: 0; left: 0;</span><br>
      <span class="hl-green">z-index: -1;</span><br>
      <span class="hl-green">border-radius: inherit;</span><br>
      <span class="hl-red">background: linear-gradient(to right, #11998e, #38ef7d);</span> /* 変化後の色 */<br>
      <span class="hl-red">opacity: 0;</span> /* 💡 最初は完全に透明にしておく */<br>
      <span class="hl-green">transition: opacity 0.5s ease;</span> /* 💡 透明度に対してアニメーションをかける */<br>
    }<br><br>

    /* 💡 ホバー時に透明度を1にして、上の色を浮き上がらせる */<br>
    <span class="hl-blue">.btn:hover::before</span> {<br>
      <span class="hl-red">opacity: 1;</span><br>
    }
  </div>

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

/* ベースのボタン */
.anim-fade-btn {
  position: relative;
  z-index: 1; /* 文字が疑似要素の下に隠れないようにする */
  padding: 15px 40px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  /* ホバー前のグラデーション（赤系） */
  background: linear-gradient(to right, #ff416c, #ff4b2b);
}

/* 疑似要素（ホバー後のグラデーション） */
.anim-fade-btn::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1; /* 本体の背景と文字の間に配置 */
  border-radius: inherit; /* 親の角丸を引き継ぐ */
  /* ホバー後のグラデーション（緑系） */
  background: linear-gradient(to right, #11998e, #38ef7d);
  /* 💡 最初は透明にしておく */
  opacity: 0; 
  /* 💡 透明度のアニメーションを指定 */
  transition: opacity 0.5s ease;
}

/* ホバー時に疑似要素を表示させる */
.anim-fade-btn:hover::before {
  opacity: 1;
}

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

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

まとめ

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

本記事のまとめ
  • グラデーションはbackground-colorではなく、backgroundまたはbackground-imageプロパティで指定する。
  • 形状は主に「線形（linear-gradient）」と「円形（radial-gradient）」の2種類を使用する。
  • 角度を指定する場合はdeg（度数）を使用し、方向を指定する場合はto rightなどを記述する。
  • 透明へ変化させる際はtransparentではなく、同じRGB値でアルファ値を0にしたrgba()を指定して色の黒ずみを防ぐ。
  • 文字へのグラデーションは、-webkit-background-clip: text;とcolor: transparent;を併用して背景を文字の形で切り抜く。
  • border-imageを使うと角丸（border-radius）が無効化されるため、角丸グラデーション枠線は疑似要素を裏に敷いて表現する。
  • 背景画像の上にグラデーションを重ねる（オーバーレイ）場合、CSSの記述はurl()の画像よりも前にグラデーションを配置する。
  • グラデーションの色自体はtransitionで滑らかに変化しないため、ホバー時のアニメーションは疑似要素のopacityを変化させて実装する。
  • 無限ループする背景アニメーションは、background-sizeで背景を巨大化し、background-position を@keyframesで動かすことで実現する。

よくある質問（FAQ）

background-colorにグラデーションを指定しても効かないのはなぜですか？

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

そのため、background-colorプロパティにlinear-gradientなどを指定しても無視されてしまいます。

グラデーションを表示させるには、background-imageプロパティ、もしくは背景の一括指定であるbackgroundプロパティを使用してください。

文字（テキスト）の色をグラデーションにするにはどうすればいいですか？

background-clipプロパティを使って、背景のグラデーションを文字の形に切り抜くことで実装します。

具体的には、対象の要素に以下の3行をセットで指定します。

  1. background: linear-gradient(...);：背景にグラデーションを敷く
  2. -webkit-background-clip: text;：背景を文字の形で切り抜く
  3. color: transparent;：手前の文字色を透明にして、奥の背景を見せる
角丸の枠線にグラデーションをかけたいのですが、直角になってしまいます。

枠線にグラデーションをかけるborder-imageプロパティは、仕様上border-radius（角丸）と併用できず直角になってしまいます。

角丸のグラデーション枠線を作りたい場合は、要素自身の背景色で中身を塗りつぶし、その裏側に要素より数ピクセルだけ大きく、グラデーションが塗られた擬似要素（::before など）を配置して、はみ出た部分を枠線のように見せる方法が標準的に使われています。

グラデーションを透明（フェードアウト）させると、途中が黒く濁ってしまうのはなぜですか？

終了色にtransparentという単語を指定していることが原因です。

Safariなどの一部のブラウザでは、transparentを透明な黒（rgba(0, 0, 0, 0)）として計算するため、色から透明へ変化する途中で黒ずみが発生します。

これを防ぐには、transparentを使わず、開始色と全く同じRGB値で、透明度（アルファ値）だけを0にした色を終了色に指定してください。

ホバー時にグラデーションの色を「フワッと」滑らかに変化させるには？

transitionプロパティは、グラデーションの色自体を滑らかに変化させることには対応していません。

フワッと色を変えたい場合は、「変化させたい色のグラデーションを塗った擬似要素」を予めopacity: 0;（透明）にして上に重ねておき、ホバーした時にopacity: 1;にフェードインさせることで滑らかなアニメーションを実現できます。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

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

関連記事

目次