Linear-Gradientを使用して線形グラデーションを簡単に描く方法

グラデーションを描画するCSSの関数です。background-imageなどで使用します。

グラデーション

色を徐々に変化させて表現することです。CSSで表現可能です。

background-image: linear-gradient

基本

background-image: linear-gradient を使用すると背景色にグラデーションを描くことがきます。

background-image: linear-gradient(blue, red);

gra01

青から赤に色を変更しています。上から下に変化しています。

それでは、色を増やしてみましょう。

background-image: linear-gradient(blue, black, red);

gra02

青、黒、赤の3色です。簡単ですね。

方向

グラデーションを掛ける方向を指定できます。

turn

background-image: linear-gradient(0.25turn, blue, black, red);

gra03

0turn, 1turnで下から上方向。。0.5turnで上から下方向。0.25turnで左から右方向。右回転です。

deg

角度でも指定できます。

background-image: linear-gradient(90deg, blue, black, red);

gra04

0degだと下から上方向。右回転。90degで左から右方向。180degで上から下方向。

方向を示すキーワード（文字列）

方向を示す文字列でも指定できます。

background-image: linear-gradient(to right, blue, black, red);

gra05

to right で左から右方向。

他には、to top, to bottom, to leftがあります。さらにこれらの組み合わせも可能です。

gra051

to right top です。右上方向にグラデーションがかかっていますね。

変化量の指定

変化量に変化をつけることが可能です。

数値%で中間点を指定します。

以下は、gra05と同じ配分です。

background-image: linear-gradient(to right, blue 0%, black 50%, red 100%);

0%で青、50%で黒、100%赤。

gra05

gra06

後半でグラデーションをかけてみましょう。

background-image: linear-gradient(to right, blue 50%, black 75%, red 100%);

50%まで青、75%で黒、100%で赤

gra07

できましたね。50%までは真っ青ですね。

%だけ指定して、中間点を移動することもできます。

background-image: linear-gradient(to right, blue 0%, red 100%);

background-image: linear-gradient(to right, blue 0%, 90%, red 100%);

中間点を90%の位置に移動しています。よく見てください、色の指定はありませんね。数値%だけです。

gra071

gra072

数値を2つ指定して、範囲を指定できます。

以下の例は、値を2つ指定して、開始点、終了点を指定しています。

background-image: linear-gradient(to right, blue 0% 33%, black 33% 66%, red 66% 100%);

background-image: linear-gradient(to right, blue 33%, black 33% 66%, red 66%);

0~33%は青、33%~66%は黒、66%~100%は赤。ピッタリな色指定。

gra08

gra081

お菓子色です。どうです似てるでしょ？

範囲に間が開けばグラデーションがかかります。

background-image: linear-gradient(to right, black 0% 20%, pink 80% 100%);

gra082

blackpinkです。0~20%はblack指定。20%~80%はグラデーション、80%~100%はpinkです。

色々な方法がありますね。

横グラデーションのくっきりverの整理

各、2つずつ方法を示めします。

ブレンド

background: linear-gradient(to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80%);
background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80%);

くっきり

background: linear-gradient(to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75%);
background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);

0%と100%は省略していますけどね。

別方向の融合

background は、カンマで区切って複数の画像を指定できましたね。グラデーションでもやってみましょう。

MDNにある勉強になるSampleです。

.gra11 {background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%);}
.gra12 {background-image: linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%);}
.gra13 {background-image: linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);}

gra11 gra12 gra13

.gra14 {
  background-image:
   linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
   linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
   linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

gra14

背景の繰り返し

sizeで区切れば繰り返しますよね。

青、赤と指定しました。

gra09

切れ目が気になりますね。

gra10

青、赤、青と指定しました。最初の色に戻すと切れ目がなくなりましたね。

background-size: 100px 100px;
background-image: linear-gradient(to right, blue, red, blue);

基本のまとめ

背景への指定なので、そのブロック要素にサイズ指定があること。グラデーションだけでは高さは発生しない。

方向を指定する方法がいくつかある。

グラデーションの変化を指定する方法は、中間点と両端を指定する方法がある。