<gradient>CSS数据类型 是<image> 的一种特殊类型，包含两种或多种颜色的过渡转变。

尝试一下

background: linear-gradient(#f69d3c, #3f87a6);

background: radial-gradient(#f69d3c, #3f87a6);

background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);

background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);

background: conic-gradient(#f69d3c, #3f87a6);

<section>  <div></div></section>

#example-element {  min-height: 100%;}

CSS 渐变没有内在尺寸，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。

语法

<gradient> 数据类型是由下面列出的函数类型中的一个定义的。

线性渐变

线性渐变会在一个假想的直线上过渡颜色。线性渐变是由linear-gradient() 函数产生的。

径向渐变

径向渐变从一个中间点（原点）开始过渡颜色。径向渐变是由radial-gradient() 函数产生的。

重复渐变

重复渐变可根据需要复制渐变，以填充指定区域。重复渐变是使用repeating-linear-gradient() 和repeating-radial-gradient() 函数生成的。

锥形渐变

锥形渐变会沿着一个圆过渡颜色。锥形渐变是由conic-gradient() 函数产生的。

插值

就像很多包含颜色的插值一样，渐变是在 alpha 预乘的颜色空间中插值的。这会避免在颜色和不透明度都在改变时出现未预料的灰色阴影。（注意旧的浏览器可能在使用transparent 关键字 时不使用此行为。）

形式语法

<gradient> =
<linear-gradient()>|
<repeating-linear-gradient()>|
<radial-gradient()>|
<repeating-radial-gradient()>|
<conic-gradient()>|
<repeating-conic-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>])

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

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

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

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

<conic-gradient-syntax> =
[[[from[<angle>|<zero>]]?[at<position>]?]||<color-interpolation-method>]? ,<angular-color-stop-list>

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

<color-interpolation-method> =
in[<rectangular-color-space>|<polar-color-space><hue-interpolation-method>?|<custom-color-space>]

<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> =
<position-one>|
<position-two>|
<position-four>

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

<rectangular-color-space> =
srgb|
srgb-linear|
display-p3|
display-p3-linear|
a98-rgb|
prophoto-rgb|
rec2020|
lab|
oklab|
<xyz-space>

<polar-color-space> =
hsl|
hwb|
lch|
oklch

<hue-interpolation-method> =
[shorter|longer|increasing|decreasing]hue

<custom-color-space> =
<dashed-ident>

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

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

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

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

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

<angular-color-stop> =
<color><color-stop-angle>?

<angular-color-hint> =
<angle-percentage>|
<zero>

<xyz-space> =
xyz|
xyz-d50|
xyz-d65

<color-stop-length> =
<length-percentage>{1,2}

<color-stop-angle> =
[<angle-percentage>|<zero>]{1,2}

<angle-percentage> =
<angle>|
<percentage>

示例

线性渐变示例

简单的线性渐变示例。

<div>线性渐变</div>

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

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

径向渐变示例

简单的径向渐变。

<div>径向渐变</div>

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

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

重复渐变示例

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

<div>重复的线性渐变</div><br /><div>重复的径向渐变</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  );}

锥形渐变示例

简单的锥形渐变示例。注意这目前并非在浏览器中广泛支持。

<div>锥形渐变</div>

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

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

规范

浏览器兼容性

参见

• 使用 CSS 渐变
• 渐变函数：linear-gradient()、repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()、conic-gradient()、repeating-conic-gradient()
• CSS 基本数据类型
• CSS 单位和值
• CSS 介绍：值和单位