線形グラデーションを作成する関数です。方向と色を指定し、滑らかな色の変化を表現できます。角度や方向キーワード(to top、to right等)で方向を制御でき、モダンなデザインに欠かせません。
linear-gradient(<angle>, <color-stop>, <color-stop>, ...)| 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)。
background: linear-gradient(to right, #ff6b6b, #4ecdc4);左から右への2色グラデーション
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);45度角度での斜めグラデーション
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);透明から黒への縦グラデーション(オーバーレイ効果)
角度指定でより自然なグラデーション。透明度を使ったオーバーレイ効果も人気。
角度の基準はAIも混同します: 0degは「下から上」、90degは「左から右」で、to right等のキーワード構文と角度の対応を取り違えた生成コードが出がちです。また同位置に2つの色を置くハードストップ(#fff 50%, #000 50%)でストライプや分割背景が作れることは、知っていると指示の幅が広がります。
左上から右下への斜めグラデーションを、角度指定とtoキーワードの両方で書いて違いを説明して
CSSグラデーションだけで斜めストライプの背景パターンを作って
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。