CSSグラデーションの完全ガイド — linear / radial / conic
CSSグラデーションはbackground-imageプロパティで指定する背景表現の手法です。画像ファイルを使わずに多彩な背景・ボタン・UIエフェクトを実現できます。
linear-gradient（線形グラデーション）
linear-gradientは指定した方向（角度や to top / to right など）に沿って色が変化するグラデーションです。`background: linear-gradient(135deg, #667eea, #764ba2)` のように書きます。複数のカラーストップを並べることで3色以上のグラデーションも作れます。ストップ位置を%や絶対値で指定すると色の変化幅を自由にコントロールできます。
radial-gradient（放射状グラデーション）
radial-gradientは中心点から外側へ円形または楕円形に広がるグラデーションです。`background: radial-gradient(circle at 50% 50%, #fff, #000)` と書くことで中心が明るい光源のような表現ができます。ゲームUI・スポットライト効果・着色グロウ表現などに使われます。
conic-gradient（コニックグラデーション）
conic-gradientは中心点の周りを角度に沿って色が変化する円錐形グラデーションです。円グラフの視覚化や色相環の表示に使えます。`background: conic-gradient(red 0deg, yellow 120deg, blue 240deg, red 360deg)` で3色の円グラフを作れます。ChromeとFirefox・Safariの最新版で対応しています。
CSSグラデーションのパフォーマンスと注意点
CSSグラデーションは画像ファイルと異なりHTTPリクエストが不要です。ただしブラウザの再描画コストがあるため、アニメーションの背景として使う場合はtransformやopacityアニメーションより重くなることがあります。Gradient Deckでは生成したCSSをワンクリックでコピーでき、プリセット集から参考にして調整する使い方もできます。