#グラデーション色について
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 の3種類から選択できます。
#グラデーション色の使用方法
グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは色経由点color stopsと呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。
background: linear-gradient(blue, pink);
}```
2種類以上の色を()内に入力することでグラデーションが適用されます。
#グラデーション色の方向の設定方法
####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]
(https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
#余談
自分の勉強用として投稿していますが、同じ問題に悩んだときに参考になれば幸いです。