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

gradation_top CSS

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( 開始点の色, 終点の色);

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

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

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

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

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

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

右から2色でグラデーション。最初に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の数値で色を1色指定する方法です。

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で指定しましょう。

background:linear-gradient( 角度, 開始点の色, 終点の色), url(画像.jpg);
background-size: cover;

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

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

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

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



コメント

タイトルとURLをコピーしました