# radial-gradient()

> 円形・楕円形のグラデーションを作成する関数です。中心からの放射状グラデーションで、位置、形状、色の配分を細かく制御できます。背景やボタンに立体感を与えるデザインに使用されます。

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/radial-gradient/

## 構文

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

## Tailwindでは

- `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にはユーティリティが無かった。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 26+ / Firefox 16+ / Safari 7+ / Edge 12+

## コード例

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

```css
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
```

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

```css
background: radial-gradient(ellipse at top left, #667eea, transparent);
```

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

```css
background: radial-gradient(circle at 30% 70%, rgba(255,107,107,0.3), transparent 50%);
```

## TIPS

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

## AIがよく間違えるポイント

構文の順序（形状 サイズ at 位置, 色...）をAIは崩しがちで、特にat句の位置ミスで無効になるコードが出ます。closest-side/farthest-corner等のサイズキーワードの違いも曖昧に説明されがちです。スポットライト風の演出や、複数のradial-gradientを重ねたメッシュ風背景が定番用途です。

## AIへの依頼文例

- 複数のradial-gradientを重ねて、ぼんやり光が差すメッシュグラデーション背景を作って

## 関連プロパティ

- [linear-gradient](https://www.css-dictionary.com/property/linear-gradient.md)
- [background-image](https://www.css-dictionary.com/property/background-image.md)