CSS の linear-gradient() 関数は、2つまたはそれ以上の色の間で、連続的な直線の変化から構成される画像を作成します。結果は <gradient> データ型のオブジェクトであり、これは <image> の特殊形です。

/* 45度に傾いたグラデーションで、
   青から始まり赤で終わる */
linear-gradient(45deg, blue, red);

/* 右下から左上に向かうグラデーションで、
   青から始まり赤で終わる */
linear-gradient(to left top, blue, red);

/* 下から上に向かうグラデーションで、
   青から始まり、長さの40%ののところで緑になり、
   赤で終わる */
linear-gradient(0deg, blue, green 40%, red);

他のグラデーションと同様、線形グラデーションは固有の寸法を持ちません。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素に合わせられます。

メモ: 繰り返して領域を埋め尽くす線形グラデーションを作成するには、代わりに repeating-linear-gradient プロパティを使用してください。

メモ: グラデーションは CSS の <image> データ型として定義されます。従って、画像データ型を要求する場所であれば、CSS のどこであっても使うことができます。このため、linear-gradientbackground-color や、 <color> を要求する他のプロパティでは動作しません。

線形グラデーションの構成

線形グラデーションは、 グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 linear-gradient() 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。

linear-gradient.png

グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。

開始点は、グラデーションラインの最初の色が始まる点です。 終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、マジックコーナーと呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。

グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は <length><percentage> データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、一つ前の点と一つ後の点の中間点になります。

構文

<side-or-corner>
グラデーションラインの開始点の位置。指定する場合は、 to に続けて2つ以下のキーワードから成ります。一つは水平方向の辺(left または right)、もう一方は垂直方向の辺(top または bottom)です。辺を表すキーワードは順不同です。指定しない場合は、 to bottom が既定になります。
to top, to bottom, to left, to right の値は、 0deg, 180deg, 270deg, 90deg の角度にそれぞれ対応します。他の値は角度に変換されます。
<angle>
グラデーションラインの方向を角度で示します。 0deg の値は to top と等価で、値が増加するとそこから時計回りに回ります。
<color-stop>
色経由点の <color> の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った <percentage> または <length> の位置)。

メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

形式文法

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

Examples

45 度 のグラデーション

body {
  background: linear-gradient(45deg, red, blue);
}

グラデーションラインの60%から始まるグラデーション

body {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}

メモ: 他の例は CSS グラデーションの使用を参照してください。

仕様書

仕様書 策定状況 コメント
CSS Images Module Level 4
Gradient Color-Stops の定義
草案 補間のヒントを追加。
CSS Images Module Level 3
linear-gradient() の定義
勧告候補 初回定義。

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
基本サポート(backgroundbackground-image での使用) 3.6 (1.9.2)-moz[1]
16 (16)[2]
10.0 (534.16)-webkit[6] 10.0[4] 11.10-o[1] 5.1-webkit[6]
On border-radius 29 (29) (有) (有) (有) (有)
<image> を受け入れる全プロパティでの使用 未サポート (有) ? ? (有)
古い webkit の構文 未サポート 3-webkit [2] 未サポート 未サポート 4.0-webkit[2]
古い 'from' の構文 (toなし) 3.6 (1.9.2)-moz[5] 10.0 (534.16)-webkit[3] 10 11.10-o[5] 5.1-webkit[3]
標準的な構文 (to キーワードを使用) 16 (16) 26.0 (537.27) 10 12.10 6.1
Interpolation hints/gradient midpoints (a percent without a color) 36 (36) 40 ? 27 ?
Unitless 0 for <angle> 46 (46)-webkit[7]
55 (55)[7]
(有) Edge 12 (有) (有)
機能 Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
基本サポート (background および background-image) 1.0 (1.9.2)-moz[1]
16.0 (16)[2]
16-webkit
26
10 (有) (有)
On border-radius ? ? ? ? ?
On any other property that accepts <image> ? ? ? ? ?
Legacy webkit syntax ? ? ? ? ?
Legacy 'from' syntax (without to) ? ? ? ? ?
Standard syntax (using the to keyword) ? ? ? ? ?
Interpolation hints/gradient midpoints (a percent without a color) ? ? ? ? ?

[1] Gecko、 Opera、 Webkit は <angle> を上ではなく右から開始します。したがって 0deg は右方向を指す指示になります。これは最新の仕様とは異なります。最新の仕様では、0deg は上方向を指す指示になります。 Firefox 42 から、接頭辞付きのグラデーションは layout.css.prefixes.gradientsfalse に設定することで無効にできるようになりました。

[2] Gecko 36.0 (Firefox 36.0 / Thunderbird 36.0 / SeaMonkey 2.33) 以前では、 Gecko は乗算済みアルファ色空間でグラデーションを適用しておらず、透過の計算時に予期しない灰色の影が発生していました。

[3] WebKit は 528 からレガシーな -webkit-gradient(linear,…) 関数をサポートしています。WebKit 534.16 時点で、標準的なグラデーションの構文もサポートしています。Gecko と違って、レガシーな WebKit では  -webkit-linear-gradient() で位置と角度の両方を指定することはできません。色経由を補うと、同じ効果を実現できます。

[4] Internet Explorer 5.5 から 9.0 はプロプライエタリな filter: progid:DXImageTransform.Microsoft.Gradient() 関数をサポートしています。

[5] Firefox 3.6 と Opera 11.10 は、開始コーナーまたはサイドが to キーワードなしで示され、事実上 from の位置であるとみなされる、初期の構文をプレフィックス版として実装しました。to 構文は Firefox 10 と Opera 11.60 で追加されました。

標準構文を接頭辞なしで実装したことに加え、 Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) はウェブの互換性を目的として、 -webkit 接頭辞付きで古い 'from' の文法を使用して導入し、これは layout.css.prefixes.webkit によって有効になります(既定値は false)。 Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) からは既定値が true になりました。

[6] Gecko、 Opera、 Webkit は <angle> を上ではなく右から開始します。したがって 0deg は右方向を指す指示になります。これは最新の仕様とは異なります。最新の仕様では、0deg は上方向を指す指示になります。 Firefox 42 から、接頭辞付きのグラデーションは layout.css.prefixes.gradientsfalse に設定することで無効にできるようになりました。 WebKit は 528 から古い -webkit-gradient(linear,…) 関数に対応しています。 WebKit 534.16 から、標準の gradient の文法にも対応しています。 Gecko とは異なり、古い WebKit の文法は -webkit-linear-gradient() で一と角度を同時に指定できません。同様の効果は色経由点をずらすことで.実現できます。

[7] Webkit や blink の挙動に合わせるため、 Gecko 46.0 (Firefox 46.0 / Thunderbird 46.0 / SeaMonkey 2.43) からは -webkit-linear-gradient 関数で(バグ 1239153)、 Gecko 55.0 (Firefox 55.0 / Thunderbird 55.0 / SeaMonkey 2.52) からは linear-gradient 関数で(バグ 1363292)単位のない 0 の角度が利用できるようになっています。

関連情報

ドキュメントのタグと貢献者

最終更新者: SphinxKnight,