CSS<gradient> データ型は、2色以上の連続的な色の変化で構成される特殊な型の <image> です。

CSS グラデーションは固有の寸法を持ちません。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。

構文

グラデーション関数

<gradient> データ型は、以下のリストにある関数型のうちの一つによって定義します。

線形 (linear) グラデーション

色が架空の直線に沿って変化します。 linear-gradient() 関数で生成されます。

.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}

放射 (radical) グラデーション

色が中央点 (origin) から連続的に変化します。 radial-gradient() 関数で生成されます。

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

反復 (repeating) グラデーション

要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 repeating-linear-gradient() 及び repeating-radial-gradient() 関数で生成されます。

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

扇形 (conic) グラデーション

色が円を描くように連続的に変化します。 conic-gradient() 関数で生成されます。

.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

補間

色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 transparent キーワードを使用するとこれを使用しないことがあるので注意してください。)

仕様書

仕様書 状態 備考
CSS Images Module Level 4
<gradient> の定義
草案 conic-gradient を追加
CSS Images Module Level 3
<gradient> の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 あり
補足
完全対応 あり
補足
補足 Gradients are limited to background-image, border-image, and mask-image.
IE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Gradients are limited to background-image, border-image, and mask-image.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
linear-gradient()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 完全対応 あり
repeating-linear-gradient()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 repeating-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 完全対応 あり
完全対応 あり
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
radial-gradient()Chrome 完全対応 26
完全対応 26
完全対応 あり
接頭辞付き
接頭辞付き -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.
完全対応 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.6 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6.1
完全対応 6.1
完全対応 5.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
完全対応 18
接頭辞付き
接頭辞付き -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.
完全対応 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 完全対応 12.1
完全対応 12.1
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
repeating-radial-gradient()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.
完全対応 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 完全対応 10Opera 完全対応 12.1
完全対応 12.1
未対応 12 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6.1
完全対応 6.1
完全対応 5.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 ありFirefox Android 完全対応 46Opera Android 完全対応 12.1
完全対応 12.1
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 7.1Samsung Internet Android 完全対応 あり

凡例

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

関連情報

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

このページの貢献者: mfuji09, SphinxKnight, yyss, wizAmit, slayslot, fscholz, ethertank, sosleepy
最終更新者: mfuji09,