CSS

2020.11.25

【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色以上の色の指定なども可能です。


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

0

関連記事

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!