CSSグラデーションガイド：線形、放射状、円錐パターン

CSSグラデーションは画像を使わずに色間のスムーズなトランジションを作成し、HTTPリクエストゼロ、無限のスケーラビリティ、極小のファイルサイズを実現します。モダンCSSは3種類のグラデーションをサポートしており、それぞれ強力な設定オプションを持っています。このガイドではすべてを実践的な例で解説します。

線形グラデーション

最も一般的なタイプで、直線に沿ってトランジションします：

/* 上から下へ（デフォルト） */
background: linear-gradient(#3B82F6, #8B5CF6);

/* 角度を指定 */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* 方向キーワードで指定 */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

カラーストップ

各色の表示位置を制御：

/* 均等配分（デフォルト） */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* カスタム位置 */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* ハードストップ（トランジションなし） */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

マルチストップグラデーション

複雑なカラートランジションを作成：

/* サンセットグラデーション */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* レインボー */
background: linear-gradient(
  90deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

グラデーションジェネレーターで線形グラデーションを視覚的に作成 — 色、角度、ストップをリアルタイムで調整できます。

放射状グラデーション

中心点から外側に広がります：

/* 中心からの円 */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* 楕円（デフォルト形状） */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* カスタム位置 */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

サイズキーワード

/* closest-side: グラデーションは最も近い辺に到達 */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: グラデーションは最も遠い角に到達（デフォルト） */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* 明示的なサイズ */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

円錐グラデーション

円グラフのように中心点を回転します：

/* 基本的な円錐 */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* 円グラフのセグメント */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* 特定の角度から */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* カスタム中心 */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

リピーティンググラデーション

3つのタイプすべてがリピートパターンをサポートしています：

/* ストライプパターン */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* 同心円リング */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* チェッカーボード（conicを使用） */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

複数グラデーションのレイヤリング

CSSは複数の背景をサポートしており、複雑なエフェクトを実現できます：

/* 画像上のグラデーションオーバーレイ */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* クロスハッチパターン */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

実践的なUIパターン

グラデーションテキスト

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

グラデーションボーダー

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

アニメーショングラデーション背景

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

パフォーマンスの考慮事項

グラデーションはGPUアクセラレーションされ、高パフォーマンスです：

グラデーションは同等の画像よりも速くレンダリングされます
background-size はレンダリングコストに影響 — 小さいタイルの方がコスト低
グラデーションの色を直接アニメーションさせないでください — 代わりに background-position をアニメーション
多くのストップを持つ複雑なグラデーションでもPNGよりは高速

ブラウザサポート

すべてのモダンブラウザが線形、放射状、円錐グラデーションをサポートしています。円錐グラデーションが最も新しく、2020年以降すべての主要ブラウザでサポートされています（Chrome 69以降、Firefox 83以降、Safari 12.1以降）。どのグラデーションタイプにもベンダープレフィックスは不要です。

FAQ

2色間のグラデーションが濁って見える場合どうすれば？

濁ったグラデーションは、カラーホイール上でグレーを通過する色間でトランジションする場合に発生します。解決策：中間点により明るい色相のカラーストップを追加、oklchカラースペース（linear-gradient(in oklch, ...)）を使用して知覚的に均一なトランジションを実現、または中間点の彩度を上げます。

グラデーションは背景の画像の代わりになりますか？

抽象的なパターン、オーバーレイ、装飾的な背景には — 完全に代替可能です。グラデーションはロード時間ゼロで、完璧にスケールし、HTTPリクエストが不要です。複雑なビジュアルや写真には画像が必要です。多くのモダンデザインは両方を組み合わせています：背景画像の上にグラデーションオーバーレイ。