2026年5月4日
CSSグラデーションとは？
グラデーションとは、1色から別の色へ滑らかに変化する表現のことです。夕焼けの空が橙から赤、紫へと変わっていくイメージを思い浮かべてください。
CSSでは、画像ファイルを使わずに background プロパティだけでグラデーションを表現できます。ボタンの背景、カードヘッダー、ページ全体の背景など、デザインを一気にリッチに見せる技です。
💡 グラデーションは「画像」として扱われる
CSSのグラデーション（linear-gradient() など）は background-image の値として扱われます。そのため background: linear-gradient(...) のように書きます。
linear-gradient の基本
linear-gradient() は直線的に色が変化するグラデーションを作る関数です。最低でも2色を指定するだけで使えます。
構文: background: linear-gradient(方向, 色1, 色2);
/* 基本：2色のグラデーション（上から下） */
.hero {
background: linear-gradient(#0d9488, #667eea);
height: 200px;
}方向を省略すると上から下へのグラデーションになります。色はカラーコード（#0d9488）や色名（teal）、rgb() など何でも使えます。
角度と方向の指定
linear-gradient() の最初の引数で、グラデーションの方向を指定できます。方向はキーワードまたは角度（deg）で指定します。
キーワードで指定する
to right（左→右）、to bottom（上→下）、to bottom right（左上→右下）のように書きます。
角度（deg）で指定する
0deg が下から上、90deg が左から右、45deg が左下から右上です。
/* 左から右へ */
.box-right {
background: linear-gradient(to right, #f97316, #eab308);
}
/* 斜め（左上 → 右下） */
.box-diagonal {
background: linear-gradient(to bottom right, #a855f7, #3b82f6);
}
/* 角度指定（45度） */
.box-45deg {
background: linear-gradient(45deg, #0d9488, #3b82f6);
}📖 色の組み合わせに迷ったときは 配色パレットジェネレーター で相性の良い色を見つけてみましょう。
カラーストップを増やす
カンマ区切りで色を3つ以上指定すると、多色グラデーションが作れます。また、各色の後に % や px でカラーストップの位置を指定できます。
/* 3色グラデーション */
.tricolor {
background: linear-gradient(to right, #ef4444, #eab308, #22c55e);
height: 50px;
}
/* %でカラーストップの位置を指定 */
.custom {
background: linear-gradient(
to right,
#0d9488 0%,
#0d9488 40%,
#667eea 70%,
#a855f7 100%
);
}同じ色を2カ所に指定すると（例: #0d9488 0%, #0d9488 40%）、その区間は単色になり、次の色から急に変化します。縞模様や硬いエッジを作るときに使うテクニックです。
💡 リアルタイムで試したい？
色や割合を変えながら結果を即座に確認したいときは、後で紹介するグラデーションジェネレーターが便利です。
radial-gradient（放射状グラデーション）
radial-gradient() は中心から外側へ放射状に広がるグラデーションを作ります。円形や楕円形の表現に使われます。
circle と ellipse
circle を指定すると真円形、省略（または ellipse）すると要素の形に合わせた楕円形になります。
/* 円形（circle）の放射状グラデーション */
.circle {
background: radial-gradient(circle, #f97316, #ef4444);
width: 200px;
height: 200px;
border-radius: 50%;
}
/* デフォルトは楕円形（ellipse） */
.ellipse {
background: radial-gradient(#667eea, #a855f7, #3b82f6);
height: 150px;
}radial-gradient() は照明のような光の表現や、丸いアイコンの背景によく使われます。
実践：よく使うパターン集
実際のウェブデザインでよく使われるグラデーションのパターンを6つ紹介します。コピーしてそのまま使えます。
/* ①ボタン：左から右へ色が変わるグラデーション */
.btn {
background: linear-gradient(to right, #0d9488, #16a34a);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
}
/* ②カードヘッダー：紫系グラデーション */
.card-header {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 20px;
border-radius: 8px 8px 0 0;
}
/* ③ヒーロー背景：夕焼け風 */
.hero-bg {
background: linear-gradient(to bottom, #f97316, #ef4444, #7c3aed);
min-height: 400px;
}
/* ④テキストにグラデーションをかける */
.gradient-text {
background: linear-gradient(to right, #0d9488, #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2rem;
font-weight: bold;
}
/* ⑤うっすらとしたセパレーター線 */
hr.fancy {
height: 2px;
background: linear-gradient(to right, transparent, #94a3b8, transparent);
border: none;
}
/* ⑥ダークテーマの背景カード */
.card-dark {
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
color: white;
padding: 40px;
border-radius: 12px;
}④のテキストグラデーションは -webkit-background-clip: text と -webkit-text-fill-color: transparent の組み合わせで実現します。見た目にインパクトがあるので、タイトルや見出しに使うと効果的です。
🎨 自分だけのグラデーションを作りたいときは グラデーションジェネレーター を使ってみましょう。スライダーで色や角度を調整するだけでCSSが生成されます。
まとめ
- ✅
linear-gradient(方向, 色1, 色2)で直線的なグラデーションを作る - ✅ 方向は
to rightなどのキーワードか45degなどの角度で指定する - ✅ 色を3つ以上指定すると多色グラデーション。
%でカラーストップの位置を制御できる - ✅
radial-gradient(circle, 色1, 色2)で放射状（中心から広がる）グラデーションを作る
グラデーションを使いこなせるだけで、デザインのクオリティが格段に上がります。ジェネレーターで色を試しながら、自分のスタイルを見つけていきましょう。