linear-gradient関数を使用するとグラデーションが利用できます。

基本

backgroundプロパティにlinear-gradient関数を使用します。これはlinear-gradient関数がimageオブジェクトの特殊型を返却する為です。

シンプルな指定

単一色

linear-gradient関数に任意の色を1つ指定します。
指定した色のみ表示されます。

CSS

.gradient-simple {
  background:linear-gradient(red);
}

結果

開始色と終了色

linear-gradient関数に任意の色を2つ指定します。
この場合、グラデーションの開始色、終了色の指定となります。

background:linear-gradient(開始色, 終了色);

上から下へグラデーションされます。
今回の例の場合、上から下にかけて赤から青に変わります。

CSS

.gradient-start-end {
  background:linear-gradient(red, blue);
}

結果