CSS 渐変
- 前のページ CSS カラーキーワード
- 次のページ CSS 径向渐変
CSSグラデーションは、指定された2色以上の滑らかな移行を表示することができます。
CSSは2つのグラデーションタイプを定義しています：
- 線形グラデーション（下/上/左/右/対角線）
- 放射状グラデーション（中心で定義されています）
CSS 線形グラデーション
線形グラデーションを作成するには、少なくとも2つの色標を定義する必要があります。色標は、滑らかな移行で表示する色です。また、始点と方向（または角度）およびグラデーション効果を設定することもできます。
構文
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
線形グラデーション - 上から下（デフォルト）
上から始まる線形グラデーションの例を示しています。赤から黄色への移行です：
例
#grad {
background-image: linear-gradient(red, yellow);
}
線形グラデーション - 左から右
以下の例では、左から始まる線形グラデーションを示しています。これは赤色から黄色への移行です：
例
#grad {
background-image: linear-gradient(to right, red , yellow);
}
線形グラデーション - 對角線
対角線グラデーションに対して、水平方向および垂直方向の始点を指定することで制御できます。
以下の例では、左上から始まる（右下に向かって）線形グラデーションを示しています。これは赤色から黄色への移行です：
例
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
角度の使用
グラデーション角度に対してさらに多くの制御を行いたい場合は、事前定義された方向（下、上、右、左、右下など）を置き換えるための角度を定義できます。値0degは上（to top）に等しいです。値90degは右（to right）に等しいです。値180degは下（to bottom）に等しいです。
構文
background-image: linear-gradient(angle, color-stop1, color-stop2);
この角度は水平線とグラデーション線の間の角度を指定します。
以下の例では、線形グラデーションに角度を使用する方法を示しています：
例
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
複数の色標の使用
以下の例では、複数の色標を持つ線形グラデーション（上から下に）を示しています：
例
#grad {
background-image: linear-gradient(red, yellow, green);
}
以下の例では、虹の色とテキストを使用して（左から右に）線形グラデーションを作成する方法を示しています：
例
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
透明度の使用
CSSのグラデーションは透明度もサポートし、グラデーション効果を作成するために使用できます。
透明度を追加する場合、rgba()関数を使用して色標を定義します。rgba()関数の最後の引数は0から1の値で、色の透明度を定義します：0は完全に透明で、1は完全に色付き（透明度がありません）。
以下の例は左から始まる線形グラデーションを示しています。それは完全に透明から全色の赤に移行します：
例
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
重複線形グラデーション
repeating-linear-gradient() 線形グラデーションを繰り返す関数：
例
重複する線形グラデーション：
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
- 前のページ CSS カラーキーワード
- 次のページ CSS 径向渐変
