円形・楕円形のグラデーションを作成する関数です。中心からの放射状グラデーションで、位置、形状、色の配分を細かく制御できます。背景やボタンに立体感を与えるデザインに使用されます。
radial-gradient(<shape> <size> at <position>, <color-stop>, ...)| bg-radial | background-image: radial-gradient(...) |
| bg-radial-[at_25%_25%] | background-image: radial-gradient(at 25% 25%, ...) |
一般形: from-{color} / to-{color} で色を指定
bg-radial / bg-conic はv4新設。v3にはユーティリティが無かった。
background: radial-gradient(circle, #ff6b6b, #4ecdc4);中央から外側への円形グラデーション
background: radial-gradient(ellipse at top left, #667eea, transparent);左上を中心とした楕円グラデーション
background: radial-gradient(circle at 30% 70%, rgba(255,107,107,0.3), transparent 50%);特定位置からの部分的なグラデーション
ボタンのホバー効果やスポットライト効果に最適。
構文の順序（形状 サイズ at 位置, 色...）をAIは崩しがちで、特にat句の位置ミスで無効になるコードが出ます。closest-side/farthest-corner等のサイズキーワードの違いも曖昧に説明されがちです。スポットライト風の演出や、複数のradial-gradientを重ねたメッシュ風背景が定番用途です。
複数のradial-gradientを重ねて、ぼんやり光が差すメッシュグラデーション背景を作って
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。