CSS の線形グラデーション linear-gradient() の使い方

ここでは CSS の線形グラデーションの使い方を説明します。

線形グラデーションとは？

ここでは、グラデーションの中でも「線形グラデーション」と言われるタイプのグラデーションを、CSS で利用する方法について説明します。

線形グラデーションというのは、ある線を基準にし、その線の方向にグラデーションの色のパターンが決まるタイプのグラデーションのことです。

このとき、グラデーションの方向を決める線のことを グラデーションライン といいます。

グラデーションは、グラデーションラインに垂直な線上で同一の色となります。

CSS で、例えば背景色をグラデーションにするには、background 属性に、 linear-gradient() 関数を設定することでグラデーション色が表示されます。

linear-gradient() は IE8 以降でサポートされています。現代的なブラウザでは十分サポートされていると言って良いでしょう。

CSS の linear-gradient() の使い方

線形グラデーションのグラデーションラインの設定

linear-gradient() には、グラデーションラインの向きと、色経由点を指定します。

グラデーションラインというのは、上で説明した通り、線形グラデーションの向きを決める基準線のことです。グラデーションラインの向きに色が変わります。グラデーションラインに垂直な線上では同じ色になります。

色経由点 (カラーストップ) というのは、グラデーションライン上に設定する色の指定点のことです。例えば、色経由点 A が赤、色経由点 B が青であれば、A と B の間が赤から青にグラデーションします。

linear-gradient() を使って、背景色をグラデーションするには次のようにします。

background: linear-gradient(0deg, darkorange, yellow, green);

最初のパラメータの 0deg (0 度) はグラデーションラインの向きです。 0 度は下から上に向かう向きです。角度は図の中心を時計回りに指定します。

それに続く色のリストは、色経由点における色を示しています。

向きがしたから上で、色経由点での色が橙色、黄色、緑を指定しているので、上の図のように色が変わります。

グラデーションラインの向きは省略できます。この時は 180deg がデフォルト値です。 つまり、グラデーションラインの向きの指定を省略した時は、上から下へ向かう向きになります。

線形グラデーションの色経由点の指定

色経由点は場所を指定しない場合、グラデーションラインの始点から終点を等間隔に配置されます。

色経由点の場所は、px で長さを指定するか、または、グラデーションライン内の視点からの長さの割合をパーセントで指定します。

グラデーションは、色の異なる色経由点の間を連続的に色が変わるように行われます。

もし、同じ色の色経由点を連続的に配置した場合は、単一色で塗り潰されます。

repeating-linear-gradient() による繰り返し線形グラデーション

repeating-linear-gradient() 関数を使うと、描画領域を埋め尽くすように、線形グラデーションパターンを繰り返すことができます。

使い方は linear-gradient() と同様です。

repeating-linear-gradient(90deg, darkorange, yellow 20px, green 40px);

一方、linear-gradient() の場合は、描画領域を埋め尽くすように自動的に色経由点が追加されるので繰り返しません。

repeating-linear-gradient(90deg, darkorange, yellow 20px, green 40px);

以上で CSS の線形グラデーションの基本的な使用法について説明しました。