CSSグラデーション — 線形・円形グラデーション完全ガイド
CSSグラデーションは画像ファイルなしに純粋なCSSで色のグラデーション効果を実現します。linear-gradientは直線方向、radial-gradientは中心点から円形に色が変化する方式です。グラデーションはbackground、border-image、maskなどCSSのimage型を受け付けるあらゆるプロパティに適用でき、ファイルサイズがないためパフォーマンス面でも優れています。
CSSグラデーションの基本構文：
linear-gradient(方向, 色1, 色2, ...)
radial-gradient(形状 サイズ at 位置, 色1, 色2, ...)
よく使われるグラデーションパターン：
— ボタン: to right, #667eea, #764ba2（紫系）
— ヒーロー背景: to bottom, #0f0c29, #302b63, #24243e（深紺）
— 暖色サンセット: to right, #f093fb, #f5576c（ピンク〜赤）
— カードオーバーレイ: to bottom, transparent, rgba(0,0,0,0.7)
rgba()によるアルファ透明度を使うと、画像の上にグラデーションオーバーレイを重ねることができます。透明から色へのグラデーション（透明→黒など）には、transparent キーワードよりも rgba(0,0,0,0) の形式を使う方がブラウザ間の色補間の問題を避けられます。
よくある質問（FAQ）
A: conic-gradientは中心点を基準に回転しながら色が変化する円錐型グラデーションです。円グラフ、色相環、ローディングスピナーアニメーションなどに活用されます。構文例：conic-gradient(red 0deg, yellow 120deg, blue 240deg)。Chrome 69+、Firefox 83+、Safari 12.1+でサポートされていますが、IEや旧Edgeには対応していません。
A: CSSグラデーション自体はtransitionで直接アニメーション化できません。一般的なワークアラウンドとして、background-size: 200%に設定してbackground-positionをアニメーションさせると流れるグラデーション効果が作れます。また、::before/::afterの疑似要素にグラデーションを設定してopacityをアニメーションする方法も有効です。
A: linear-gradientとradial-gradientはIE10+を含むすべてのモダンブラウザでサポートされています。現在は-webkit-プレフィックスはほぼ不要です。conic-gradientはIEとレガシーEdgeでは非対応で、Chrome 69+・Firefox 83+・Safari 12.1+が必要です。グラデーションのフォールバックとして単色backgroundを先に指定することが推奨されます。