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

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

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

<gradient> は CSS の <image> データ型に所属しますので、 <image> が使用できるところでのみ使用できます。このため、 linear-gradientbackground-color や、その他の <color> を要求するプロパティでは動作しません。

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

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

linear-gradient.png

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

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

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

構文

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

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

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

<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> ]?

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() の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 26
完全対応 26
完全対応 10
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
完全対応 3.6
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
補足
完全対応 10
補足
補足 Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera 完全対応 12.1
完全対応 12.1
未対応 11 — 15
接頭辞付き 補足
接頭辞付き -o- のベンダー接頭辞が必要
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari 完全対応 6.1
完全対応 6.1
完全対応 5.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 ありFirefox Android 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
to keywordChrome 完全対応 26Edge 完全対応 12Firefox 完全対応 10IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 10Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Interpolation Hints / Gradient MidpointsChrome 完全対応 40Edge 未対応 なしFirefox 完全対応 36IE 未対応 なしOpera 完全対応 27Safari 完全対応 6.1WebView Android 完全対応 40Chrome Android 完全対応 40Edge Mobile 未対応 なしFirefox Android 完全対応 36Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Unitless 0 for <angle>Chrome 完全対応 26Edge 完全対応 12Firefox 完全対応 55
完全対応 55
部分対応 46
補足
補足 Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
IE 未対応 なしOpera 完全対応 16Safari 完全対応 6.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 55
完全対応 55
部分対応 46
補足
補足 Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

最終更新者: mfuji09,