radial-gradient()

レスポンシブ・関数

円形・楕円形のグラデーションを作成する関数です。

構文

Syntax
radial-gradient(<shape> <size> at <position>, <color-stop>, ...)

コード例

例 1

background: radial-gradient(circle, #ff6b6b, #4ecdc4);
実行結果
中央から外側への円形グラデーション

中央から外側への円形グラデーション

例 2

background: radial-gradient(ellipse at top left, #667eea, transparent);
実行結果
左上を中心とした楕円グラデーション

左上を中心とした楕円グラデーション

例 3

background: radial-gradient(circle at 30% 70%, rgba(255,107,107,0.3), transparent 50%);
実行結果
部分的なグラデーション

特定位置からの部分的なグラデーション

💡 TIPS

ボタンのホバー効果やスポットライト効果に最適。

関連プロパティ

ブラウザサポート

IE10+, 全モダンブラウザ