在此页

• 句法
• 插值
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

<gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

A CSS gradient has no intrinsic dimensions ; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.

句法

<gradient> data type is defined with one of the function types listed below.

Linear gradient

Linear gradients transition colors progressively along an imaginary line. They are generated with the linear-gradient() 函数。

Radial gradient

Radial gradients transition colors progressively from a center point (origin). They are generated with the radial-gradient() 函数。

Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the repeating-linear-gradient() and repeating-radial-gradient() 函数。

Conic gradient

Conic gradients transition colors progressively around a circle . They are generated with the conic-gradient() 函数。

插值

As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the transparent keyword .)

范例

Linear gradient example

A simple linear gradient.

<div class="linear-gradient">Linear gradient</div>
				

div {
  width: 240px;
  height: 80px;
}
				

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

Radial gradient example

A simple radial gradient.

<div class="radial-gradient">Radial gradient</div>
				

div {
  width: 240px;
  height: 80px;
}
				

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

Repeating gradient examples

Simple repeating linear and radial gradient examples.

<div class="linear-repeat">Repeating linear gradient</div>
<br>
<div class="radial-repeat">Repeating radial gradient</div>
				

div {
  width: 240px;
  height: 80px;
}
				

.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 gradient example

A simple conic gradient example. Note that this isn't supported widely across browser as of yet.

<div class="conic-gradient">Conic gradient</div>
				

div {
  width: 200px;
  height: 200px;
}
				

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

规范

规范	状态	注释
CSS Images Module Level 4 The definition of '<gradient>' in that specification.	工作草案	Adds conic-gradient
CSS Images Module Level 3 The definition of '<gradient>' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<gradient>	Chrome 完整支持 26	Edge 完整支持 12 Prefixed 完整支持 12 Prefixed Prefixed Implemented with the vendor prefix: -ms-	Firefox 完整支持 3.6 注意事项 完整支持 3.6 注意事项 注意事项 Gradients are limited to background-image , border-image ，和 mask-image .	IE 完整支持 10 Prefixed 完整支持 10 Prefixed Prefixed Implemented with the vendor prefix: -ms-	Opera 完整支持 12.1 完整支持 12.1 不支持 11 — 15 Prefixed Prefixed Implemented with the vendor prefix: -o- 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari 完整支持 6.1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 26	Firefox Android 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Gradients are limited to background-image , border-image ，和 mask-image .	Opera Android 完整支持 12.1 完整支持 12.1 不支持 11 — 14 Prefixed Prefixed Implemented with the vendor prefix: -o- 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 1.5
conic-gradient()	Chrome 完整支持 69 完整支持 69 完整支持 59 Disabled Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 79	Firefox 完整支持 83 完整支持 83 完整支持 75 Disabled Disabled From version 75: this feature is behind the layout.css.conic-gradient.enabled preference. To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 56 完整支持 56 完整支持 46 Disabled Disabled From version 46: this feature is behind the Enable Experimental Web Platform Features preference.	Safari 完整支持 12.1	WebView Android 完整支持 69	Chrome Android 完整支持 69 完整支持 69 完整支持 59 Disabled Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 83 完整支持 83 完整支持 79 Disabled Disabled From version 79: this feature is behind the layout.css.conic-gradient.enabled preference. To change preferences in Firefox, visit about:config.	Opera Android 完整支持 48 完整支持 48 完整支持 43 Disabled Disabled From version 43: this feature is behind the Enable Experimental Web Platform Features preference.	Safari iOS 完整支持 12.2	Samsung Internet Android 完整支持 10.0
linear-gradient()	Chrome 完整支持 26	Edge 完整支持 12	Firefox 完整支持 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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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. preference (needs to be set to ). 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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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 完整支持 ≤37	Chrome Android 完整支持 26	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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1 完整支持 12.1 不支持 11 — 14 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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. 完整支持 14 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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 iOS 完整支持 6.1 完整支持 6.1 完整支持 6 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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.	Samsung Internet Android 完整支持 1.5
radial-gradient()	Chrome 完整支持 26	Edge 完整支持 12	Firefox 完整支持 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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false . preference (needs to be set to ). 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 Prefixed Prefixed Implemented with the vendor prefix: -o- 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari 完整支持 6.1 完整支持 6.1 完整支持 5.1 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.	WebView Android 完整支持 ≤37	Chrome Android 完整支持 26	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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false . preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1 完整支持 12.1 不支持 12 — 14 Prefixed Prefixed Implemented with the vendor prefix: -o- 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS 完整支持 6.1 完整支持 6.1 完整支持 6 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.	Samsung Internet Android 完整支持 1.5
repeating-conic-gradient()	Chrome 完整支持 69 完整支持 69 完整支持 59 Disabled Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 79	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 56 完整支持 56 完整支持 46 Disabled Disabled From version 46: this feature is behind the Enable Experimental Web Platform Features preference.	Safari 完整支持 12.1	WebView Android 完整支持 69	Chrome Android 完整支持 69 完整支持 69 完整支持 59 Disabled Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 不支持 No	Opera Android 完整支持 48 完整支持 48 完整支持 43 Disabled Disabled From version 43: this feature is behind the Enable Experimental Web Platform Features preference.	Safari iOS 完整支持 12.2	Samsung Internet Android 完整支持 10.0
repeating-linear-gradient()	Chrome 完整支持 26	Edge 完整支持 12	Firefox 完整支持 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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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. preference (needs to be set to ). 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 完整支持 15 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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. 不支持 11 — 15 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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.	Safari 完整支持 6.1 完整支持 6.1 完整支持 5.1 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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 完整支持 ≤37	Chrome Android 完整支持 26	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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1 完整支持 12.1 完整支持 14 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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. 不支持 11 — 14 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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.	Safari iOS 完整支持 6.1 完整支持 6.1 完整支持 6 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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.	Samsung Internet Android 完整支持 1.5
repeating-radial-gradient()	Chrome 完整支持 26	Edge 完整支持 12	Firefox 完整支持 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 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false . preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 完整支持 10	Opera 完整支持 12.1 完整支持 12.1 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12 — 15 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari 完整支持 6.1 完整支持 6.1 完整支持 5.1 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -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	Chrome Android 完整支持 26	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. 完整支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false . preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1 完整支持 12.1 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12 — 14 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS 完整支持 7 完整支持 7 完整支持 6 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.	Samsung Internet Android 完整支持 1.5

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• Using CSS gradients
• Gradient functions: linear-gradient() , radial-gradient() , repeating-linear-gradient() , repeating-radial-gradient() , conic-gradient()
• CSS Basic Data Types
• CSS Units and Values
• Introduction to CSS: Values and Units

元数据

• 最后修改： Aug 19, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Images
4. CSS Types
5. 指南

   1. Implementing image sprites in CSS
   2. Using CSS gradients
6. 特性

   1. <angle-percentage>
   2. <angle>
   3. <basic-shape>
   4. <blend-mode>
   5. <custom-ident>
   6. <dimension>
   7. <frequency-percentage>
   8. <frequency>
   9. <gradient>
   10. <image>
   11. <integer>
   12. <length-percentage>
   13. <length>
   14. <number>
   15. <percentage>
   16. <ratio>
   17. <resolution>
   18. <shape>
   19. <string>
   20. <time-percentage>
   21. <time>
   22. <transform-function>
   23. <url>
   24. color
   25. flex
   26. ident
   27. image-orientation
   28. image-rendering
   29. object-fit
   30. object-position
   31. position