グラデーション色について

CSS グラデーションは データ型で表現され、2つ以上の色の間の連続的な変>化から成る の特殊型です。グラデーションは3種類から選択することができます。線形linear (linear-gradient 関数によって生成)、放射radial (radial-gradient 関数によって生成)、扇形conic (conic-gradient 関数によって生成) の3種類です。 repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient の各関数によって、反復グラデーションを生成することもできます。
まずグラデーションは3種類から選択することができます。

① 線形 ⇨ linear-gradient
② 放射 ⇨ radical-gradient
③ 扇形 ⇨ conic-gradient　　　　の３種類から選択できます。

グラデーション色の使用方法

グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは色経由点color stopsと呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。

.simple-linear {
background: linear-gradient(blue, pink);
}
２種類以上の色を（）内に入力することでグラデーションが適用されます。

グラデーション色の方向の設定方法

to right 左から右へ

.horizontal-gradient {
background: linear-gradient(to right, blue, pink);
}

to bottom right 左上から右下へ

.diagonal-gradient {
background: linear-gradient(to bottom right, blue, pink);
}

70deg 70度の位置へ

.angled-gradient {
background: linear-gradient(70deg, blue, pink);
}

MDN

余談

自分の勉強用として投稿していますが、同じ問題に悩んだときに参考になれば幸いです。