linear-gradient()

レスポンシブ・関数

線形グラデーションを作成する関数です。モダンなデザインに欠かせません。

構文

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

コード例

例 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

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

関連プロパティ

ブラウザサポート

IE10+, 全モダンブラウザ