背景をグラデーションにする

できあがりイメージ

つくりかた

Step2 グラデーションにする要素のCSSセレクタを探す

CSSのセレクタで header を探しましょう。
サンプルでは header に反映させます。

Step3 要素の背景をグラデーションにする

background: linear-gradient を追加して、グラデーションの指定をします。
カッコの中に色を２つ以上指定するとグラデーションが作成できます。
サンプルでは#FA8BFF(紫色)→#2BD2FF(ブルー)→#2BFF88(黄緑) の３色を指定しています。
カラーコードの後ろの % はその色の位置を指定しています。0%は一番上、50%は真ん中、100%は一番下になります。

※background-imageは反映されなくなります。

Step4 グラデーションの方向を指定する

to 〜 の後に値を指定するとグラデーションに方向をつけることができます。
サンプルでは、to bottom right を追加して、右下方向のグラデーションをつけています。
値と値は , (カンマ) で区切るように注意しましょう。

Step5 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step6 実際の見え方を確認する

背景がグラデーションになっていたら完成です。