CSSグラデーション
CSSグラデーションを使用すると、指定した2つ以上の色の間のスムーズな遷移を表示できます。
CSSは、次の3種類のグラデーションを定義しています。
- 線形グラデーション（下/上/左/右/対角線）
- 放射状グラデーション（中心によって定義されます）
- 円錐曲線（中心点を中心に回転）
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の値は、「totop」に相当します。90度の値は「右へ」に相当します。180度の値は「下まで」に相当します。
構文
background-image: linear-gradient(angle, color-stop1, color-stop2);
次の例は、線形グラデーションで角度を使用する方法を示しています。
例
#grad {
background-image: linear-gradient(180deg, 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%);
}