CSS グラデーション書くこととデバッグするための推測なし

掲載日 2026年4月17日

CSS グラデーションは、シンプルに見えるが、期待する青から紫へのきれいなフェードの場所にむしろ茶色の塊が現れるという特徴を持つ機能の一つです。構文には特徴があり、デバッグのプロセスは不明瞭であり、ほとんどのチュートリアルは問題が発生する前に終了します。

これは実用的なリファレンスです。すべての概念には実行可能なコードが含まれています。別のタブで CSS グラデーションジェネレーターを開いて、読んでいる間には実験してみてください。

3つのタイプ — そしてそれぞれに使うべきとき

linear-gradient は方向性のあるものに適しています：ヘッダーの背景、ボタンの色、ディバイダーなど。

background: linear-gradient(135deg, #6366f1, #8b5cf6);

radial-gradient 中心点から放射状に広がる — スポットライト効果、光の効果、円形のUI要素に適しています。

background: radial-gradient(circle at 30% 40%, #f59e0b, #ef4444);

conic-gradient 中心角の周りをスキャン — パイチャート、ロードスピナー、色の輪に適しています。

background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #3b82f6);

ルール：方向性の遷移がある場合は線形、放射状に遷移がある場合は径線、回転がある場合は円形を使用します。

構文の分解：人々が困る部分

混同の最も一般的な原因は 方向と角度. to right と 90deg どちらも左から右へのグラデーションを生成しますが、非正方形要素での処理に違いがあります。要素の形状に適応したい場合はキーワード方向（to right, to bottom right）を使用し、正確な制御が必要な場合は度数値を使用します。

色のポイント は正確さが重要です：

/* Even distribution — browser figures out spacing */
background: linear-gradient(to right, #f97316, #8b5cf6);

/* Explicit stops */
background: linear-gradient(to right, #f97316 0%, #f97316 30%, #8b5cf6 60%, #8b5cf6 100%);

2番目のバージョンでは、30%に固いオレンジを保持し、その後紫に移行します。明確な位置が指定されていない場合、スムーズで均一なブレンドが得られます。

硬い色の境界を強制することもできます — ストリップパターンに有用です：

/* Hard mid-stop: sharp color transition at 50% */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

よくある問題とその原因

バンドイング — スムーズなグラデーションの代わりに見えるストライプ — 低コントラストまたは暗い色から暗い色への遷移で発生します。わずかな中間ポイントを追加し、色をわずかにずらすことで解決できます：

/* Before — banding prone */
background: linear-gradient(180deg, #1e1b4b, #312e81);

/* After — add a mid nudge */
background: linear-gradient(180deg, #1e1b4b 0%, #2e2b6e 50%, #312e81 100%);

色がきれいにブレンドされない — 赤と青の間で紫が茶色に変化する — これはsRGBの問題です。CSS Color Level 4では in oklab 補間が導入され、視覚的な色空間を通じてブレンドされます：

/* Modern — cleaner blends */
background: linear-gradient(in oklab to right, #ef4444, #3b82f6);

2026年にはブラウザでのサポートがしっかりしています。古くからの互換性が必要な場合は、標準のグラデーションをその上にフォールバックとして保持してください。

古いWebKitにおける円形グラデーション：機能的な用途（パーセントチャート、進行表示）のために、固体色のフォールバックを追加してください — 装飾的な失敗は問題ありませんが、破損したUIは問題です：

.pie {
  background: #6366f1; /* fallback */
  background: conic-gradient(#6366f1 var(--pct), #e5e7eb var(--pct));
}

グラデーションの重ね合わせ

CSS バックグラウンドは複数の値を受け入れます — グラデーションは宣言順に層のように重なります：

background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  radial-gradient(ellipse at 20% 80%, #6366f1 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, #f59e0b 0%, transparent 60%),
  #0f172a;

暗いオーバーレイが上にあり、2つの光がそれの下にあり、固体のフォールバックが最下層です。これは、画像を読み込まなくても深さを表現するヘッダーセクションに一般的です。

1つの制約： rgba または透明なポイントを持つグラデーションは、それらの下にあるものと同様に同じ background スタックと相互作用します。層の順序を計画してください。

CSS 変数でグラデーションをテーマにできるようにする

グラデーション内の硬い色値はテーマシステムを破壊します。ポイントを変数として定義してください：

:root {
  --gradient-start: #6366f1;
  --gradient-end: #8b5cf6;
  --gradient-angle: 135deg;
}

.card {
  background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
}

[data-theme="warm"] {
  --gradient-start: #f97316;
  --gradient-end: #ef4444;
}

テーマの切り替えは単一の変数オーバーライドになります。これに加えて @property を組み合わせることで、アニメーションされたグラデーションを実現できます — それがないと、CSSはグラデーション値の間を補間できません：

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 495deg; }
}

.animated {
  animation: rotate-gradient 4s linear infinite;
  background: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6);
}

パフォーマンス：グラデーションが画像よりも重い場合

グラデーションは描画時にGPUでラスタライズされます。静的でシンプルなグラデーションでは、HTTPリクエストによる画像よりも軽いです。しかし、頻繁に描画される要素に複雑な層を持つグラデーションは、描画のボトルネックを引き起こします。

これらのパターンに注意してください：

1つの要素に3～4層以上のグラデーション
背景にグラデーション — スクロールフレームごとに再描画されます position: fixed アニメーションされたグラデーションなし — これらは完全な再描画を強制し、コンポジット更新にはなりません
DevTools → パフォーマンスでプロファイリングしてください。ほとんどのグラデーションの使用はこれらの制限に近づいていません。ボトルネックに遭遇した場合、画像を事前にレンダリングするか、または @property -ベースのアニメーションに切り替えれば、適切な解決策になります。

ジェネレーターを使って始まり、コードで終える @property最も効率的なグラデーションの実装は視覚的です：

を用いて色と位置を調整し、出力結果をスタイルシートにコピーします。それから上記の技術——変数の抽出、層の重ね合わせ、補間——を使って、推測なしに生産用に拡張できます。

CSS グラデーション：書くこととデバッグするための推測なし 2 CSS グラデーションジェネレーター CSS グラデーション：書くこととデバッグするための推測なし 1 oklab CSS グラデーションは、シンプルに見えるが、期待する青から紫へのきれいなフェードの場所にむしろ茶色の塊が現れるという特徴を持つ機能の一つです。The