【css】linear-gradient の使い方

写真やイラストなどの素材はないけれども、良い感じの背景にしたい！という時、グラデーションが便利です。

この記事では、linear-gradientの使い方についてご紹介します。

線形（一方向）のグラデーション

線形（一方向）のグラデーションは、

background: linear-gradient(色)

で指定することができます。

例）background: linear-gradient( #333c5e,#fff);

色が変わる方向を変更する

「background: linear-gradient( #333c5e,#fff);」では、上から下へ向かってだんだんと色が変わるように指定できましたが、以下の記述で色が変わる方向を指定できます。

background: linear-gradient(to 方向,始まりの色,終わりの色);

例 to buttom）background: linear-gradient(to bottom,#333c5e,#fff);
例 to top）background: linear-gradient(to top,#333c5e,#fff);
例 to right）background: linear-gradient(to right,#333c5e,#fff);
例 to left）background: linear-gradient(to left,#333c5e,#fff);

色が変わり始める位置を変更する

色の方向を変えるだけではなく、色が変わり始める位置を指定することもできます。

background: linear-gradient(to 方向,始まりの色 色が変わり始める位置,終わりの色);

例 10%）background: linear-gradient(#333c5e 10%,#fff);
例 30％）background: linear-gradient(#333c5e 30%,#fff);
例 50％）background: linear-gradient(#333c5e 50%,#fff);
例 80％）background: linear-gradient(#333c5e 80%,#fff);

色数を増やす

これまでは2色のグラデーションの例を見てきましたが、3色以上のグラデーションを作ることもできます。

background: linear-gradient(色（3色以上）);

例）background: linear-gradient(#333c5e,#000 40%,#fff);

0%〜40%まで紺から黒への変化、40%〜100%までは黒から白への変化を表すことができます。

斜めにする

「to 方向」の方向の部分を「top left」など開始位置を変えることで斜めのグラデーションも作ることができます。また、もう1つの方法として、角度を指定するという方法もあります。

background: linear-gradient(角度 , 色);

例）background: linear-gradient(45deg, #333c5e,#fff);

円形のグラデーション

一方向だけでなく、円形にグラデーションを作ることもできます。

background: radial-gradient(中央の色,外側の色);

例）background: radial-gradient(#333c5e,#fff);

円形のグラデーションの場合も、線形の時と同様に、色の変わる位置や3色以上の色の指定なども可能です。

ぜひグラデーションを活用してみてください。