CSSグラデーションの種類

CSSでは3種類のグラデーションが使えます。JavaScriptなしでリッチな背景や装飾を実現できます。

linear-gradient（線形グラデーション）

直線方向にグラデーションを生成します。

/* 上から下（デフォルト） */
background: linear-gradient(#ff6b6b, #4ecdc4);

/* 左から右 */
background: linear-gradient(to right, #ff6b6b, #4ecdc4);

/* 斜め45度 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

/* 3色以上 */
background: linear-gradient(to right, #f7971e, #ffd200, #ff6b6b);

radial-gradient（放射グラデーション）

中心点から放射状にグラデーションを生成します。

/* 円形 */
background: radial-gradient(circle, #fff 0%, #000 100%);

/* 楕円 */
background: radial-gradient(ellipse at center, #ff6b6b 0%, transparent 70%);

色停止点（Color Stop）の活用

/* 位置を指定して明確な色の境界を作る */
background: linear-gradient(
  to right,
  #ff6b6b 0%,
  #ff6b6b 50%,
  #4ecdc4 50%,
  #4ecdc4 100%
);

conic-gradient（円錐グラデーション）

円の中心から角度方向に色が変わります。円グラフやカラーホイールの作成に使えます。

background: conic-gradient(red 0deg 90deg, green 90deg 180deg, blue 180deg 360deg);

実用的なグラデーション活用例

  • ヒーローセクションの背景
  • カードのホバーエフェクト
  • テキストへのグラデーション（background-clip: text）
  • 区切り線のフェードアウト効果