LINEで現役エンジニアに直接質問してみよう!登録無料

CSS グラデーションを表現する「linear-gradient」の書き方・使い方

linear-gradientとは、CSSのbackgroundを使う時、背景にグラデーションを作るための関数の1つです。

background: linear-gradient(ここに色を指定);のように記述して、色々なグラデーションを表現することが出来ます。

グラデーションを使いこなせると、透過した背景を画像に重ねてモダンなWebサイトを作ったりできます。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

linear-gradientとは?

linear-gradientとは、CSSでグラデーションをかける時にbackgroundに指定する関数の1つです。

下記のように、backgroundlinear-gradient()を使って、backgroundのグラデーションを指定します。

background: linear-gradient(〜〜〜);

後で詳しく解説しますが、「〜〜〜」の部分にどの方向どういう色からどういう色にグラデーションするという設定を書きます。

linear-gradientは、英語の意味からわかるように「1つの方向に向かってグラデーションをする」という設定になります。

linear-gradientの使い方・書き方

linear-gradientを使うには、まずはじめに3つの情報が必要です。

  1. どの方向からグラデーションするのかを決める
  2. 始まりの色を決める
  3. 終わりの色を決める

この3つの情報があれば、関数の書き方に当てはめていくだけで、グラデーションを作ることが出来ます。早速、書き方を解説します。

background: linear-gradient(グラデーションの方向, 始まりの色, 終わりの色);

グラデーションの方向は「角度」か「キーワード」を指定します。角度は「0deg, 90deg, 180deg, 270deg」のような感じです。キーワードはto top, to bottom, to left, to rightのような感じです。

色関連は、16進数表記や、rgbrgba表記が使えます。

では、実際にlinear-gradientを使った例を紹介します。

左から右へグラデーション

緑から黄色のグラデーションを右方向にかけています。右方向にかけるため、to rightを指定している部分がポイントです。

上からへグラデーション

緑から黄色のグラデーションを下方向にかけています。下方向にかけるため、to bottomを指定している部分がポイントです。

linear-gradientでグラデーションの変化位置を変える

今までの書き方は、グラデーションの色が変化する位置を 0% の場所になるグラデーションの方法を紹介していました。

ここでは、そのグラデーションの変化を開始する部分を変える方法を紹介します。

グラデーションの変化する位置を変える方法

例えば開始色を 40% で設定すると、要素の左40%は全部開始色と同じ色になります。

このグラデーションを表現するCSSの書き方は下記の通りです。

background: linear-gradient(to right, #78e455 40%, #f5f53f);
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。