関数書式
linear-gradient(【グラデーションの向き】, 【色指定】, 【色指定】 [, 【色指定】...])
対応ブラウザ
- IE 9:×
- Firefox 10.0:○(-moz-linear-gradient)
- Opera 11.61:○(-o-linear-gradient)
- Chrome 17.0:○(-webkit-linear-gradient)
- Safari 5.1:○(-webkit-linear-gradient)
※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
引数一覧
グラデーションの向きの指定は省略可能です。
以下、文中での「ボックス」は、プロパティが適用される要素が占める四角形の領域のことを指します。
引数 | 値 | 内容 |
グラデーションの向き | 角度 | グラデーションの向きを角度で指定します。角度は、0度を右への水平の向きとして反時計回りに増加していく値として解釈されます。 |
開始位置 | 開始位置を示すtop left bottom right のキーワードを使ってグラデーションの向きの指定を行います。 たとえば「left bottom」ならボックスの左下の角から開始して、中心点を通る向きのグラデーションになります。 |
開始位置 角度 | 開始位置の指定に、上記のキーワードに加え、centerが使えます。 開始位置を、単位付きの数値を使って、ボックスの左上からの横と縦の座標で指定することも可能です。 開始位置と角度を同時に指定した場合、指定の開始位置から始まり、指定の角度の向きを持ったグラデーションとなります。 -moz-linear-gradient()のみの実装です。 |
to 終了方向 | 終了方向を示すtop left bottom right のキーワードを使ってグラデーションの向きの指定を行います。 キーワードは方向を表し、ボックスの辺や角を表すわけではありません。 たとえば「to left bottom」ならボックスの中心点を通って、ボックスの形状にかかわりなく、左下方向へと向かうグラデーションになります。 最新の規格草案で定義された指定方法で、現在-moz-linear-gradient()と-o-linear-gradient()が実装しています。 |
色指定 | 色 [長さ] | グラデーションの向きに沿って、指定されたそれぞれの色に、指定された順番でグラデーションしていきます。 任意の数指定可能ですが、最低限、開始と終了の二点の色は指定する必要があります。 省略可能な「長さ」を指定すると、グラデーションの軸線の上で、その長さの地点になったとき、その色になるようにグラデーションします。 「長さ」を省略した場合は均等に調整されます。たとえば、開始と終了のみ色指定した場合、既定では「開始色 0%, 終了色 100%」と指定したのと同様になります。 |
解説文
CSS3のグラデーションには線形グラデーションと円形グラデーションがあり、線形グラデーションは、単純な一方向へのグラデーションのことを指します。
linear-gradient()はこの線形グラデーションを生成するCSS関数です。linear-gradient()自体はプロパティではなく、画像を指定するCSSプロパティに値として設定することで、指定した内容の線形グラデーションを表示させることができます。
仕様では、任意の画像を扱うプロパティの値として使用できることになっていますが、現状の実装では、backgroundプロパティおよびbackground-imageプロパティにのみ指定可能です。
もっとも単純な線形グラデーションの指定では、開始色と終了色のみ指定します。
以下の例では、上辺の白から底辺の黒へと、徐々に色彩が均等に移り変わっていきます。省略時には、既定では、グラデーションの開始位置はボックスの上辺(top)となり、終了位置は底辺(bottom)になり、グラデーションの向きは上から下への垂直の向き(-90deg または 270deg または to bottom)になります。
#element_id{
width:500px;
height:300px;
background-image:linear-gradient(white, black);
}
色指定は任意の数追加できます。以下の例では、青から黄色へ推移し、底辺で赤になります。
#element_id{
width:500px;
height:300px;
background-image:linear-gradient(blue, yellow, red);
}
グラデーションの向きを、角度によって指定することもできます。この場合、角度の解釈は、0度が右向きで、反時計回りに進み、90度が上向き、180度が左向き、270度が下向き(既定値)です。負の角度の場合は時計回りに進みます。例えば、下向きは270度ですが、負数で表すと-90度です。
| ↑ 90度 -270度 to top | |
← 180度 -180度 to left | | → 0度 to right |
| ↓ 270度 -90度 to bottom | |
角度指定では、グラデーションが、全体として、ボックスの中心点を軸に回転したかのように表示されます。
グラデーションが垂直や水平のときはグラデーションの開始位置(最初に指定した色になる地点)と終了位置(最後に指定した色になる地点)は、それぞれ開始方向に存在するボックスの辺、終了方向に存在するボックスの辺になります。
垂直や水平以外の向きのときは、グラデーションの開始位置は、開始方向に存在するボックスの角のうち、ボックスの中心から遠いほうの角を通る、グラデーションの向きに対して垂直な線になります。
同じように、終了位置も、終了方向に存在するボックスの角のうち、ボックスの中心から遠い方の角を通る、グラデーションの向きに対して垂直な線になります。
線形グラデーションでは、グラデーションの向きに対して垂直な線の上の点は同じ色になり、向きに沿って開始位置から終了位置まで色が変化していきます。
以下の例では角度に180度を指定することで、右側の辺の黒から左側の辺の白へと水平にグラデーションするように指定しています。
#element_id{
width:500px;
height:300px;
background-image:linear-gradient(180deg, white, black);
}
グラデーションの向きを開始位置を示すキーワードによって指定することもできます。
以下の例では、開始位置に右上(top right)を指定することで、ボックスの右上の角からボックスの中心点を通る向きのグラデーションを指定しています。
#element_id{
width:500px;
height:300px;
background-image:linear-gradient(top right, white, black);
}
既定ではグラデーションは均等に行われますが、ちょうどその色になる地点を指定することもできます。色指定引数で、色の指定の後に「長さ」を指定すると、開始位置からの距離がその長さの地点で、ちょうどその色になるようにグラデーションが調整されます。
以下の例では、上辺から底辺までの距離を基準に、10%の地点までは青で、40%の地点でちょうど黄色になり、底辺でちょうど赤になるように指定しています。
#element_id{
width:500px;
height:300px;
background-image:linear-gradient(blue 10%, yellow 50%, red 100%);
}
Firefox(-moz-linear-gradient())のみ、開始位置と角度を同時に指定することもできます。また、Firefox(-moz-linear-gradient())では開始位置をキーワードではなく、左上からの距離を示す座標で指定することもできます。
以下の例ではボックスの左上から(100px,150px)の位置を開始位置として45度の向きを持つグラデーションを指定しています。
#element_id{
width:500px;
height:300px;
background-image:-moz-linear-gradient(100px 150px 45deg, white, black);
}
最新の仕様(草案)では、グラデーションの向きを、終了方向を示すキーワードによって指定することもできます。以下の例では左下へと向かう向きのグラデーションを指定しています。現在、この方式はFirefox(-moz-linear-gradient()とOpera(-o-linear-gradient())のみ実装しています。
#element_id{
width:500px;
height:300px;
background-image:linear-gradient(to left bottom, white, black);
background-image:-o-linear-gradient(to left bottom, white, black);
}
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.box{
width:200px;
height:100px;
border:black solid 1px;
}
h1{
font-size:medium;
}
/* 上から下への垂直の線形グラデーションの例(青>黄色>赤) */
div#box1 {
background-image:linear-gradient(blue,yellow,red); /* 標準 */
background-image:-moz-linear-gradient(blue,yellow,red); /* Firefox */
background-image:-o-linear-gradient(blue,yellow,red); /* Opera */
background-image:-webkit-linear-gradient(blue,yellow,red); /* Chrome, Safari */
}
/* 角度のみ(30度)指定した場合の例 */
div#box2 {
background-image:linear-gradient(30deg,blue,yellow,red);
background-image:-moz-linear-gradient(30deg,blue,yellow,red);
background-image:-o-linear-gradient(30deg,blue,yellow,red);
background-image:-webkit-linear-gradient(30deg,blue,yellow,red);
}
/* 開始位置(右下の角)のみ指定した場合の例 */
div#box3 {
background-image:linear-gradient(right bottom,blue,yellow,red);
background-image:-moz-linear-gradient(right bottom,blue,yellow,red);
background-image:-o-linear-gradient(right bottom,blue,yellow,red);
background-image:-webkit-linear-gradient(right bottom,blue,yellow,red);
}
/* 終了方向(左下方向へ)を指定した場合の例(Firefox、Operaのみの実装) */
div#box4 {
background-image:linear-gradient(to left bottom,blue,yellow,red);
background-image:-moz-linear-gradient(to left bottom,blue,yellow,red);
background-image:-o-linear-gradient(to left bottom,blue,yellow,red);
background-image:-webkit-linear-gradient(to left bottom,blue,yellow,red);
}
/* 開始位置(30px,30px)と角度(30度)を指定した場合の例(Firefoxのみの実装) */
div#box5 {
background-image:linear-gradient(30px 30px 30deg,blue,yellow,red);
background-image:-moz-linear-gradient(30px 30px 30deg,blue,yellow,red);
background-image:-o-linear-gradient(30px 30px 30deg,blue,yellow,red);
background-image:-webkit-linear-gradient(30px 30px 30deg,blue,yellow,red);
}
/* グラデーションのなかでの各色の配置を指定した場合の例 */
div#box6 {
background-image:linear-gradient(blue 10%,yellow 70%,red 100%);
background-image:-moz-linear-gradient(blue 10%,yellow 70%,red 100%);
background-image:-o-linear-gradient(blue 10%,yellow 70%,red 100%);
background-image:-webkit-linear-gradient(blue 10%,yellow 70%,red 100%);
}
</style>
</head>
<body>
<h1>上から下への垂直の線形グラデーションの例(青>黄色>赤)<br>(グラデーションの軸を指定しなかった場合の既定の表示)</h1>
<div id="box1" class="box"></div>
<h1>角度のみ(30度)指定した場合の例</h1>
<div id="box2" class="box"></div>
<h1>開始位置(右下の角)のみ指定した場合の例</h1>
<div id="box3" class="box"></div>
<h1>終了方向(左下方向へ)を指定した場合の例(Firefox、Operaのみの実装)</h1>
<div id="box4" class="box"></div>
<h1>開始位置(30px,30px)と角度(30度)を指定した場合の例(Firefoxのみの実装)</h1>
<div id="box5" class="box"></div>
<h1>グラデーションのなかでの各色の配置を指定した場合の例<br>
(開始地点から10%地点まで青、70%地点でちょうど黄色、100%地点でちょうど赤になるように指定)</h1>
<div id="box6" class="box"></div>
</body>
</html>
関連項目