CSS辞書

linear-gradient()

レスポンシブ・関数

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

構文

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

Tailwindでは

bg-linear-to-rbackground-image: linear-gradient(to right, ...)
bg-linear-65background-image: linear-gradient(65deg, ...)

一般形: from-{color} via-{color} to-{color} で色を指定

v4で bg-gradient-* から bg-linear-* に改名。補間色空間も指定可(bg-linear-to-r/oklch)。

コード例

1

background: linear-gradient(to right, #ff6b6b, #4ecdc4);
実行結果
左から右へのグラデーション

左から右への2色グラデーション

2

background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
実行結果
45度斜めグラデーション

45度角度での斜めグラデーション

3

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グラデーションだけで斜めストライプの背景パターンを作って

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

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