CSS グラデーションとは？
ドラッグ可能な色停止点で線形・放射・円錐グラデーションを作成し、ブレンドモードと即使用できる CSS を出力します。
CSS グラデーションは、色の滑らかな変化からブラウザが生成する画像です。レンダリング時に計算されるため、どのサイズでも劣化せず、画像ファイルも不要です。
種類は 3 つあります。線形（方向や角度）、放射（中心から広がる円・楕円）、円錐（中心を回転する扇形）。各グラデーションは色のストップで定義され、ストップごとに位置とアルファを指定して混ざり方を調整できます。
複数のグラデーションは background-image にカンマ区切りで重ね、background-blend-mode で合成して質感を強化できます。CSS では oklch などの補間色空間も使えるため、知覚的に滑らかな変化が得られます。
- 線形グラデーションは光の向きや奥行きの表現に最適です。
- 放射・円錐グラデーションはスポットライト、リング、カラーホイールに便利です。
- ストップ位置を調整すると、境界をシャープにもソフトにもできます。