linear-gradientで線形グラデーションのかけ方

CSSで設定するグラデーションは画像の扱いとなるため、要素のbackgroundやbackground-imageに、linear-gradient（リニアグラディエント）を記載して指定します。

例えば、指定する要素の上部から、黒(#000)から白(#fff)にグラデーションをかける際は以下のように記載します。

#sample {
background: linear-gradient(#000, #fff);
}

一方、background-colorは画像ではなく、色彩の指定になるため、linear-gradientを設定しても効果はありません。linear-gradientを使用する際には、background、もしくはbackground-imageに設定するようにしましょう。

この3つについては、以下の違いがあります。

  • background:背景画像,背景色（初期値：transparent）,位置など;
  • background-image:背景画像;
  • background-color:背景色;

backgroundは、background-imageやbackground-colorなどの複数のプロパティを一括で設定できるショートハンドのため、汎用性が高いです。使い勝手がよいため、当サイト運営者は主にbackgroundを使用しており、このページでもbackgroudにて説明していますが、background-imageで設定しても問題はありません。

background: linear-gradient();の設定方法

この「linear」は「線形」の意味になりますが、上→下、左→右など、直線的にグラデーションをかける際に使用します。

単純に記載する場合、以下のように指定すると、デフォルトの方向の値は「to bottom」になるため、指定する要素の背景画像にて、上から下へ、黒 → 白のグラデーションがかかります。

■Hexadecimal (ヘキサデシマル、16進数) 指定

background: linear-gradient(#000, #fff);

これは、以下のように記載しても同じ意味になります。

■カラーネーム指定

background: linear-gradient(black, white);

■RGB色指定

background: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));

■RGBA指定（透過指定可）

background: linear-gradient(rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));

rgba(0, 0, 0, 1)の最後の4つ目のパラメータ（アルファ値）が透過指定となります。0.01～1の範囲で任意に指定することができ、「0」は完全な透明、「1」は不透明で透過なしを表します。「0.1」などの場合、「.1」とゼロを省略して記載されることも多いです。

■明示的な方向指定

background: linear-gradient(to bottom,#000, #fff);

方向指定については、to leftやto right、to topやto bottomなど、そのままの意味になります。to top right（左下から右上へ）、to bottom left（右上から左下へ）なども可能です。また、角度（deg）で指定することもでき、デフォルトであるto bottomは180deg、to topは360degの意味になり、時計回りに計算されます。そのため、45degなどの柔軟な設定が可能です。

■明示的な位置指定

background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);

色に指定されているパーセンテージは、グラデーションが開始される位置、もしくは終了する位置を表します。例えば、上記の場合、黒から白へのグラデーションが、上部の0%の位置から開始され、次のパーセンテージである100%の位置で完全に白になり終了するという意味になります。

上記のように、CSSにてグラデーションをかける際、複数のlinear-gradient画像や円形のradial-gradient画像を重ねたり、透過指定をすることにより、より複雑な表現が可能となります。なかでも、透過指定と開始位置のパーセンテージの箇所は重要なポイントなります。

linear-gradientでグラデーションをかける位置の指定方法

linear-gradientでグラデーションをかける際、以下のようにパーセンテージで指定すると、開始する箇所を調整することができます。

■位置を60%で指定した場合

#sample2 {
background:linear-gradient(red 60%, green);
}

この場合、赤から緑へのグラデーションが上から60%の位置で開始され、次第に緑にグラデーションしていき、上から100%の位置で完全に緑に変わる意味になります。

一方、両方とも50%で指定した場合、50%の位置で赤から緑へのグラデーションが開始され、次のパーセンテージの指定箇所まで継続しますが、次のパーセンテージの開始時期も50％で同じ位置のため、すぐに緑に変わり、境界線のように表示されます。

■両方とも50%で指定した場合

#sample3 {
background:linear-gradient(red 50%, green 50%);
}

次のパーセンテージは指定されていないため、グラデーションはかからず、最後まで緑色が継続することになります。また、グラデーションが開始される50％の位置までは赤色が継続します。

そのため、CSSのlinear-gradientにおけるパーセンテージは、グラデーションが開始される位置、もしくは終了する位置と考えておけばよいでしょう。

これを例えば、以下のようにしたとします。

■位置を20%と50%で指定した場合


#sample4 {
background:linear-gradient(red 20%,orange,yellow, green 50%,blue,purple);
}

この場合、redからgreenのグラデーションが20%の位置で開始され、50%の位置からblue、purpleとグラデーションされますが、その間のorangeやyellowなどは特に何も記載されていないため、ブラウザにて等分で自動的に計算されます。

ここで、greenのrgbaをRGBA(0, 128, 0, 1.0)、purpleのrgbaをRGBA(128, 0, 128, 1.0)とし、これらをそれぞれ10%に透過した場合、以下のように表示されます。

■「0.1」で10%に透過した場合

#sample5 {
background:linear-gradient(red 20%,orange,yellow, rgba(0, 128, 0, 0.1) 50%,blue,rgba(128, 0, 128, 0.1));
}

この場合、透過した緑と紫の部分が薄くなって表示されています。

また、パーセンテージではなく、pxで指定することもできます。

当サイトではテンプレートのサンプルなどもご紹介していますが、このグラデーションの位置をピンポイントで調整することで海を表現しています。

■位置を「px」で指定した場合

#sample6 {
background:
linear-gradient(to bottom, rgb(3,150,254) 20px, rgb(26,211,255) 75px, 
rgb(26,211,255 ) 90px, rgb(240,252,255) 120px, rgb(1,236,255) 150px, 
rgb(129,252,246) 175px, rgb(129,252,246) 200px, rgb(255,255,255) 249px, 
rgb(240,232,198) 250px, rgb(240,232,198) 350px);
height:350px;
}

この場合、要素の高さを350pxに指定した上で、その間でグラデーションの位置を指定しています。

こちらは夕暮れのビーチです。

#sample7 {
background:
linear-gradient(to bottom, rgb(255,255,234 ,1) 20px, 
rgb(255,255,234) 75px, rgb(246,232,222) 90px, rgb(245,201,161) 120px, 
rgb(208,197,196,1) 150px, rgb(208,197,196,1) 175px, rgb(53,175,203) 200px, 
rgb(254,233,252) 249px, rgb(203,193,190) 250px, rgb(226,182,153) 350px);
height:350px;
}

上記は1枚の背景画像に、1つのグラデーションをかけた単純なものですが、複数のグラデーションを重ねて表現することもできます。

複数のグラデーション画像を重ねて表示する方法

上記のlinear-gradientを使用し、以下のように2つのグラデーション画像を指定した場合、一般的なCSSのルールにより、後に記載した方が適用されます。

■2つの画像を指定した場合

#sample8 {
background: linear-gradient(black, white);　→　無効
background: linear-gradient(red, green);　→　適用
}

この場合、後の指定で上書きされるため、前に記載した方は機能しません。

仮に、後の画像を以下のように10%に透過しても、前の黒白の画像は表示されません。

■後の画像を透過した場合

#sample9 {
background: linear-gradient(black, white);　→　無効
background: linear-gradient(rgba(255,0,0,0.1), rgba(0,128,0,0.1));　→　適用
}

これは、CSSでは後ろに書いた方にて前の記述が上書きされるからです。

そのため、上記のように、background:の指定を並べても複数のグラデーション画像を重ねて表示することはできません。

一方、以下のようにカンマで区切り、1つの画像に2つのグラデーションを記載した場合、先に記載した方が優先的に適用され、黒白の画像が表示されます。

■1つの画像に2つのグラデーションを指定した場合

#sample10 {
background:
linear-gradient(black, white),　→　適用
linear-gradient(red, green);　→　有効
}

この場合はどちらの画像も有効になるため、上層の画像に透過設定をすることで、下層の画像も表示されるようになり、より複雑なグラデーションをかけることが可能になります。

つまり、2つの画像ではなく、一つの画像に2つのグラデーションを指定する意味になります。

background:linear-gradient(black, white),linear-gradient(red, green);

例えば、font-family: Meiryo, sans-serif;などと記載した場合、先に書いたMeiryoの方が優先的に適用されますが、これと同じように先に書いた方から順に適用されます。

セミコロンとカンマのわずかな違いでも、意味は全く異なるので注意しましょう。

これは以下のように書いても同じ意味になりますが、この場合、先に記載した画像にrgba(0, 0, 0,0), rgba(255, 255, 255,0)で透過にすると透明な画像が適用され、後ろの方の記載で表示されます。

■上の画像のみ完全に透明にした場合

#sample11 {
background:
linear-gradient(rgba(0, 0, 0,0), rgba(255, 255, 255,0)),　→　適用
linear-gradient(rgba(255,0,0,1), rgba(0,128,0,1));　→　適用
}

完全な透過ではなく、50%程度などの透過で設定した場合、色彩が合わさって表示されます。

■上の画像のみ50%で透過した場合

#sample12 {
background:
linear-gradient(rgba(0, 0, 0,0.5), rgba(255, 255, 255,0.5)),　→　適用
linear-gradient(rgba(255,0,0,1), rgba(0,128,0,1));　→　適用
}

つまり、上記のように記載した場合、二つの重なり合うグラデーションが設定された一つの画像の意味になり、前に書いた方も後ろに書いた方もどちらも有効になります。

上記のように、透過設定を使用することで、重なり合う複雑なグラデーションを効果を表現することができます。そのため、linear-gradientでグラデーションを指定する際には、透過指定が可能となるrgbaの表示方法を使用することをおすすめします。

透過と位置の指定による複雑なグラデーションのかけ方

上記のように、複数のグラデーション画像を重ねて表示する場合、以下のようにカンマで区切って並べていきます。

background: linear-gradient(),
linear-gradient(),
linear-gradient();

上記は3枚ですが、何枚でも重ねることができます。

例えば、上記#sample8のグラデーション画像を「to right」にて右向きに表示し、50%の透過をした上で2枚重ねた場合、以下のように表示されます。

■グラデーション画像を2枚重ねた場合

#sample13 {
background:
linear-gradient(to right,rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%),
linear-gradient(rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%);
}

ただし、複数のグラデーション画像を透過で重ねる場合、透過の箇所はアルファ合成と呼ばれる複雑な計算式で色がブレンドされてしまうため、意図的に制御するのが難しいです。

そのため、単色のみで指定することをおすすめします。

例えば、以下は赤のみrgba(255, 0, 0, 1) で透過したものですが、以下のように表示されます。

■赤のみで透過した場合

#sample14 {
background:
linear-gradient(to right,rgba(255, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0.5) 50%),
linear-gradient(rgba(255, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0.5) 50%);
}

また、background-size:値;を使用することで、要素内でのグラデーション画像の大きさを指定することができます。

例えば、background-size:20% 20%;にて幅と高さを要素の20%と指定した場合、5分の1の大きさで表示され、残りの4つはリピートして表示されます。

■background-size:を「%」で指定した場合

#sample15 {
background:
linear-gradient(to right,rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%),
linear-gradient(rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%);
background-size:20% 20%;
}

このbackground-size:をパーセンテージではなく、絶対値のpxで指定する場合は以下のようになります。

■background-size:を「px」で指定した場合

#sample16 {
background:
linear-gradient(to right,rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%),
linear-gradient(rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%);
background-size:40px 40px;
}

この場合も、リピートされて表示されますが、リピートしない場合はbackground-repeat: no-repeat;も設定しておくとよいでしょう。

また、以下のように、to bottomやto rightではなく、斜めに45度傾けて以下のように表示することもできます。

■degで傾けた場合

#sample17 {
background:
linear-gradient(135deg,rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%),
linear-gradient(45deg,rgba(255, 0, 0, 0.5) 50%, rgba(0, 128, 0, 0.5) 50%);
background-size:40px 40px;
}

上記のような設定を合わせることで、以下のようなチェックの背景画像を、jpgやpngなどの画像素材を使用せずに、CSSのlinear-gradientのみで表現することができます。

#sample18 {
background:
linear-gradient(to right,rgba(255, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0.5) 50%),
linear-gradient(rgba(255, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0.5) 50%);
background-size:40px 40px;
}

上記のようなグラデーション画像の場合、複数の背景画像を重ねてサイズを指定し、それをリピートする点がポイントになります。

background:とbackground-color:の併用方法

上記のように、linear-gradientでのグラデーション画像を使用する際には、rgbaで透過設定をすることで複雑な表現をすることができます。

しかしながら、backgroundには初期値があるため、後に記載するとbackground-colorなどの設定は上書きされてしまいます。そのため、背景画像と背景色を併用する際には、backgroundの後に、background-colorを記載するとよいでしょう。

例えば、以下のように指定した場合、CSSのルールでは後の記述が適用されるため、transparentの記載が適用されます。この場合、透明であったとしても、先に記載した緑は上書きされるため、表示されません。

■background-color:の場合

#sample19 {
background-color: green;
background-color: transparent;
}

この場合、先に記載したbackground-color: green;自体が無効になります。

一方、以下のように記載した場合には、後ろの記載が適用されてgreenで表示されます。

■background-color:の場合

#sample20 {
background-color: transparent;
background-color: green;
}

この場合、background-color: transparent;が無効になります。

一方、以下のようにbackgroundで記載した場合、background: url(/example.png);には、初期値のbackground-color: transparent;も含まれており、複数のプロパティが一括で指定されています。

■background:の場合

#sample21 {
background-color: green;
background: url(/image/logo-sample.png) no-repeat;
}

そのため、上記の#sample17と同様、backgroudの初期値のbackground-color: transparent;の透明色にて、background-color: green;の緑が上書きされ、画像のみで表示されます。

透明色で上書きされるため、緑が透かされて表示されるようにも感じますが、設定自体が上書きされるため、表示されません。

一方、以下のように記載した場合、#sample18と同様、緑でbackground-color: transparent;の透明色が上書きされるため、「画像＋緑」で表示されます。

■background:の場合

#sample22 {
background: url(/image/logo-sample.png) no-repeat;
background-color: green;
}

また、以下のようにlinear-gradientを指定する際も、上記の背景画像の扱いとなるため、同様になります。

■linear-gradientの場合

#sample23 {
background:
linear-gradient(to right,rgba(255, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0.5) 50%),
linear-gradient(rgba(255, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0.5) 50%);
background-size:100px 100px;
background-repeat: no-repeat;
background-color: green;
}

つまり、上記のようにbackground:とbackground-color:を併用する場合、background-color:を後に記載する必要があります。

ただし、この場合でも、背景色と背景画像では、背景画像の方が優先されるため、透過設定をせずにlinear-gradientでのグラデーション画像が全体をカバーしている場合には、「画像のみ」で表示されることになります。

一方、複数のプロパティを一括指定するbackground:ではなく、画像のみのbackground-imageについては、background-color: transparent;の初期値はないため、併用してもそのまま表示されます。

■background-image:の場合

#sample24 {
background-color: green;
background-image: url(/image/logo-sample.png) no-repeat;
}

上記のように、backgroundには初期値のbackground-color: transparent;も設定されているため、background:とbackground-color:を同時に使用する際には、記載順序に注意して使用するようにしましょう。

トップページ　⁄　CSSの一覧　⁄　linear-gradient
関連ページ