linear-gradient関数 | WebworksTips

linear-gradient関数は、backgroundプロパティなどの背景関連プロパティの値に指定して、線形のグラデーションを表す。関数の引数は、半角スペースとカンマ（,）で区切って指定する。
始点、終点だけでなく、途中点を指定して3色以上のグラデーションを表すこともできる。各点の位置を省略した場合は、色の数に合わせて均一に変化する。

linear-gradient ( 開始位置と角度 , 開始色 , 途中色 , 終了色 );

div.Sample1{
  width: 500px; height: 100px;
  background: linear-gradient(180deg, rgba(49,164,203,1), rgba(236,65,145,1));
}
div.Sample2{
  width: 500px; height: 100px;
  background: linear-gradient(to top right, red 0%, white 50%, blue 100%);
}

.Sample1は上から下へ向かって2色の線形グラデーションが表示される。
.Sample2は右上角に向かって3色の線形グラデーションが表示される。