# linear-gradient()

> 線形グラデーションを作成する関数です。方向と色を指定し、滑らかな色の変化を表現できます。角度や方向キーワード（to top、to right等）で方向を制御でき、モダンなデザインに欠かせません。

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

## 構文

```css
linear-gradient(<angle>, <color-stop>, <color-stop>, ...)
```

## Tailwindでは

- `bg-linear-to-r` → background-image: linear-gradient(to right, ...)
- `bg-linear-65` → background-image: linear-gradient(65deg, ...)
- 一般形: `from-{color} via-{color} to-{color} で色を指定`
- 補足: v4で bg-gradient-* から bg-linear-* に改名。補間色空間も指定可（bg-linear-to-r/oklch）。

## ブラウザ対応

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

## コード例

### 例1: 左から右への2色グラデーション

```css
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
```

### 例2: 45度角度での斜めグラデーション

```css
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
```

### 例3: 透明から黒への縦グラデーション（オーバーレイ効果）

```css
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
```

## TIPS

角度指定でより自然なグラデーション。透明度を使ったオーバーレイ効果も人気。

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

角度の基準はAIも混同します: 0degは「下から上」、90degは「左から右」で、to right等のキーワード構文と角度の対応を取り違えた生成コードが出がちです。また同位置に2つの色を置くハードストップ（#fff 50%, #000 50%）でストライプや分割背景が作れることは、知っていると指示の幅が広がります。

## AIへの依頼文例

- 左上から右下への斜めグラデーションを、角度指定とtoキーワードの両方で書いて違いを説明して
- CSSグラデーションだけで斜めストライプの背景パターンを作って

## 関連プロパティ

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