グラデーションとは | バイブコーダーのための名称辞典

グラデーションとは

linear-gradient や radial-gradient を使って、色を滑らかに変化させる CSS の背景表現。

概要

linear-gradient() や radial-gradient() を使うと、画像を用意しなくても色が滑らかに変化する背景を作れます。角度を指定して斜めに変化させたり、中心から円形に広がらせたり、3 色以上を組み合わせたりと、指定の仕方で見た目の印象を大きく変えられます。ボタンやヒーローセクションの背景など、幅広い場面で使われます。

別名

表記ゆれ：グラデーション、linear-gradient、radial-gradient、グラデ背景

現場では「グラデ」と略して呼ぶことも多く、「グラデをかけて」で通じます。

AI への伝え方

「背景をグラデーションにして」で伝わりますが、色の方向（斜め・円形）や使う色の数を伝えるとイメージがぶれません。「◯◯色から◯◯色へ斜めに変化するグラデーション」のように、開始と終了の色を具体的に指定すると再現度が上がります。

似たパーツとの違い

「グラデーションテキスト」はグラデーションを文字にだけ適用する技法で、background-clip: text を使って文字の形でグラデーションを切り抜きます。グラデーションは背景や図形全体に使う点が違います。

デモ

linear-gradient（角度あり）

radial-gradient

多色グラデーション

コード

HTML

<div class="gradient-demo">
  <div class="gradient-demo__box gradient-demo__box--linear">
    <span>linear-gradient（角度あり）</span>
  </div>
  <div class="gradient-demo__box gradient-demo__box--radial">
    <span>radial-gradient</span>
  </div>
  <div class="gradient-demo__box gradient-demo__box--multi">
    <span>多色グラデーション</span>
  </div>
</div>

CSS

.gradient-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: sans-serif;
}

.gradient-demo__box {
  flex: 1;
  min-width: 150px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
}

.gradient-demo__box--linear {
  background: linear-gradient(135deg, #0017c1 0%, #4dd0e1 100%);
}

.gradient-demo__box--radial {
  background: radial-gradient(circle at 30% 30%, #4dd0e1 0%, #0017c1 70%);
}

.gradient-demo__box--multi {
  background: linear-gradient(90deg, #ff7ab8 0%, #0017c1 40%, #4dd0e1 70%, #ffd166 100%);
}