CSS

A function that creates a background gradient where colors spread out from a central circle or ellipse.

radial-gradient()

radial-gradient() は、円や楕円を中心として広がるグラデーションを背景に描くための関数です。色が同心円状に変化していくので、太陽の光や水面の波紋のような効果を表現できます。

構文の基本：

background: radial-gradient(形状や位置, 色1, 色2, ...);

ポイント：

• 中心から外側に向かって色が変化します。
• 最初の色が中央に、最後の色が外側に配置されます。
• circle（円）や ellipse（楕円）を指定できます。
• グラデーションの位置も at center や at top left などで調整可能です。

簡単な例：

background: radial-gradient(circle, white, lightblue);

これは、中央が白く、外側に向かって水色に変化する円形グラデーションになります。

実用例：

• フォーカスを強調する背景
• ボタンやカードの視覚的アクセント
• やわらかい雰囲気のページ背景