CSSでのlinear-gradient()

linear-gradient()関数は、線形グラデーションの「画像」を作成します.
線形グラデーションを作成するには、開始点と角度(角度として指定)のグラデーション効果を設定する必要があります.終端色も定義します.

//  
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

例:

//     （                 ，     ，    ，    :）
#grad {
  background-image: linear-gradient(red, yellow, blue);
}

//    （          ，    0      ，90       ）
#grad1 {
  height: 100px;
  background-color: red; /*             */
  background-image: linear-gradient(0deg, red, yellow); 
}

#grad2 {
  height: 100px;
  background-color: red; /*             */
  background-image: linear-gradient(90deg, red, yellow); 
}

#grad3 {
  height: 100px;
  background-color: red; /*             */
  background-image: linear-gradient(180deg, red, yellow); 
}

#grad4 {
  height: 100px;
  background-color: red; /*             */
  background-image: linear-gradient(-90deg, red, yellow); 
}

参照リンク:https://www.runoob.com/cssref/func-linear-gradient.html