CSSでグラデーションを指定 [linear-gradient]

cssでグラデーションを指定する方法です！簡単に指定できます。

linear-gradient、radial_gradienttの値を使って色を指定

• 線形グラデーション linear-gradient( 開始点の色, 終点の色);
• 角度をつける linear-gradient( 135deg,　開始点の色, 終点の色);
• 方向指定 linear-gradient(to right, #FFC778, #FFF);
• RGBで指定 linear-gradient(rgb(138, 6, 233), rgb(243, 9, 9));
• RGBAで指定、画像の上に透過して被せる
• 円形グラデーションradial_gradientt( 開始点の色, 終点の色);

linear-gradient( 開始点の色, 終点の色);

上から下に２色でのグラデーション。
色の指定を増やせば3色以上も可能です。

See the Pen
Gradation1 by MAI (@MAIIMANISHI)
on CodePen.

linear-gradient( 135deg,　開始点の色, 終点の色);

左上から右下に２色でのグラデーション。最初にdegで角度を指定。

See the Pen
gradation2 by MAI (@MAIIMANISHI)
on CodePen.

linear-gradient(to right, #FFC778, #FFF);

右から２色でグラデーション。最初にto rightを指定。
左からは色の指定順を入れ替えましょう。

See the Pen
gradation3 by MAI (@MAIIMANISHI)
on CodePen.

linear-gradient(rgb(138, 6, 233), rgb(243, 9, 9));

rgbはRed、Green、Blueの数値で色を１色指定する方法です。

See the Pen
gradation4 by MAI (@MAIIMANISHI)
on CodePen.

linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6))

rgbaはRed、Green、Blueの3色に、Alpha（透過度）の情報を加えたもの。 半透明の表現が可能となります。写真の上に透過したグラデーションを被せたい時は必ずrgbaで指定しましょう。

See the Pen
gradation5 by MAI (@MAIIMANISHI)
on CodePen.

radial-gradient(開始点の色,終点の色)

円形のグラデーションはradial_gradientで指定できます。

See the Pen
gradation_radial by MAI (@MAIIMANISHI)
on CodePen.