CSS Gradients (linear, radial)

概要

linear-gradient() と radial-gradient() で2色以上の滑らかな色の遷移を背景に適用する。角度・方向・色停止位置を細かく制御でき、repeating-linear-gradient でストライプパターンも作成可能。画像を使わずに豊かなビジュアルが実現できる。

対応ブラウザ

基本構文

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.spotlight {
  background: radial-gradient(circle at 30% 40%, #fff 0%, transparent 70%);
}

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

実務での使いどころ

• ヒーローセクションの背景

  画像を使わずにグラデーションで美しいヒーローバナーを作成する。

• 装飾パターン

  repeating-linear-gradient でストライプやチェックなどの幾何学パターンを生成。

注意点

アクセシビリティ

• グラデーション上にテキストを配置する場合は、すべての位置で十分なコントラスト比を確保する。

参考リンク

• MDN Web Docs — linear-gradient()
• Can I use — CSS Gradients