<gradient>

<gradient> CSS 数据类型是 <image> 的一种特殊类型，它由两种或多种颜色之间的渐进过渡组成。

试试

CSS 渐变没有内在尺寸；即，它没有自然或首选尺寸，也没有首选比率。它的实际大小将与应用它的元素的大小相匹配。

语法

<gradient> 数据类型使用下面列出的函数类型之一定义。

线性渐变

线性渐变沿着一条假想的线逐步过渡颜色。它们由 linear-gradient() 函数生成。

径向渐变

径向渐变从一个中心点（原点）逐步过渡颜色。它们由 radial-gradient() 函数生成。

圆锥渐变

圆锥渐变围绕一个圆逐步过渡颜色。它们由 conic-gradient() 函数生成。

重复渐变

重复渐变重复一个渐变，以尽可能地填充给定的区域。它们由 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函数生成。

插值

与任何涉及颜色的插值一样，渐变在 alpha 预乘颜色空间中计算。这可以防止在颜色和不透明度都发生变化时出现意外的灰色阴影。（请注意，旧浏览器在使用透明关键字时可能不会使用此行为。）

正式语法

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>  

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )  

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )  

<repeating-radial-gradient()> = 
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>

示例

线性渐变示例

一个简单的线性渐变。

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

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

css

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

径向渐变示例

一个简单的径向渐变。

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

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

css

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

圆锥渐变示例

一个简单的圆锥渐变示例。请注意，目前它在浏览器中的支持度并不广泛。

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

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

css

.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}

重复渐变示例

简单的重复线性渐变和径向渐变示例。

<div class="linear-repeat"></div>
<span>Repeating linear gradient</span>
<hr />
<div class="radial-repeat"></div>
<span>Repeating radial gradient</span>
<hr />
<div class="conic-repeat"></div>
<span>Repeating conic gradient</span>

div {
  display: inline-block;
  width: 240px;
  height: 80px;
}

span {
  font-weight: bold;
  vertical-align: top;
}

css

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

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}

规范

规范
CSS 图像模块级别 4 # gradients

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。