CSS3 グラデーション完全解説：線形・放射状のデザインテクニック

1. はじめに

• グラデーションとは？
  • CSS3のグラデーション機能は、複数の色を滑らかにブレンドし、美しい背景やデザイン要素を作成する技術。
• CSS3 グラデーションの種類
  1. 線形グラデーション（Linear Gradient）
  2. 放射状グラデーション（Radial Gradient）
  3. 円錐グラデーション（Conic Gradient）
• この記事のゴール
  • CSSグラデーションの基本と応用テクニックを理解し、実用的なデザインを作成できるようになる。

🎨 2. 線形グラデーション（Linear Gradient）

① 基本構文

background: linear-gradient(方向, 色1, 色2, ...);

② 線形グラデーションの方向指定

• デフォルト方向: 上から下 (to bottom)
• 例：左から右のグラデーション

background: linear-gradient(to right, #ff7e5f, #feb47b);

• 角度で指定

background: linear-gradient(45deg, #4facfe, #00f2fe);

③ 複数色のグラデーション

background: linear-gradient(to right, #ff7e5f, #feb47b, #86a8e7);

④ グラデーションの途中で色を止める

background: linear-gradient(to bottom, #ff7e5f 30%, #feb47b 70%);

🛠️ 実用例：ボタン背景

.button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  border-radius: 5px;
  padding: 10px 20px;
  color: white;
  text-align: center;
}

🌈 3. 放射状グラデーション（Radial Gradient）

① 基本構文

background: radial-gradient(形状 サイズ, 色1, 色2, ...);

② 形状の指定

• 円形 (circle)

background: radial-gradient(circle, #ff7e5f, #feb47b);

• 楕円形 (ellipse)

background: radial-gradient(ellipse, #4facfe, #00f2fe);

③ グラデーションの中心点を指定

background: radial-gradient(circle at top, #ff7e5f, #feb47b);

④ 色の停止点

background: radial-gradient(circle, #ff7e5f 20%, #feb47b 60%);

🛠️ 実用例：背景装飾

.header {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
  height: 300px;
  text-align: center;
}

🎯 4. 円錐グラデーション（Conic Gradient）

① 基本構文

background: conic-gradient(色1, 色2, ...);

② 色と停止点

background: conic-gradient(#ff7e5f 0%, #feb47b 50%, #86a8e7 100%);

③ 中心点の指定

background: conic-gradient(at 50% 50%, red, yellow, green, blue);

🛠️ 実用例：円形グラフ

.pie-chart {
  background: conic-gradient(red 0% 25%, yellow 25% 50%, green 50% 75%, blue 75% 100%);
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

⚙️ 5. グラデーションの応用テクニック

① 透明度を活用したグラデーション

background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));

② 重ね合わせ（Overlay）

background: 
  linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('background.jpg');

③ グラデーションアニメーション

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

.animated-gradient {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  background-size: 400% 400%;
  animation: gradientAnimation 3s infinite alternate;
}

💡 6. 実践的なデザイン例

① カードデザイン

.card {
  background: linear-gradient(to right, #4facfe, #00f2fe);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

② ボタンデザイン

.button {
  background: linear-gradient(to right, #ff416c, #ff4b2b);
  border-radius: 25px;
  color: white;
  padding: 10px 20px;
  border: none;
}

🚀 7. よくあるエラーと解決策

1. グラデーションが表示されない
   → 構文ミスやブラウザのサポート状況を確認
2. 色の遷移が滑らかでない
   → 色の停止点を見直す

📚 8. まとめ

• CSS3 グラデーションは多彩なデザインを実現できる強力なツール
• 線形・放射状・円錐グラデーションを使い分けることで、効果的なデザインが可能
• 基本から応用まで、実践を重ねて使いこなそう！