gradient

线性渐变

线性渐变沿着一条假想线逐渐过渡颜色。

文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

语法

linear-gradient(
  [
    <angle> | to <side-or-corner>
    [, <color-stop>]+
  ]?
  [, <color-stop>]+
)

示例

linear-gradient(red, blue);

/* 角度 */
linear-gradient(0deg, red, blue);
linear-gradient(90deg, red, blue);

/* 方向 */
linear-gradient(to right, red, blue);
linear-gradient(to bottom left, red, blue);

径向渐变

径向渐变从一个中心点（原点）逐步过渡颜色。

文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient

语法

radial-gradient(
  [ circle | ellipse ]? [ at <position> | <circle> ]? ,
  <color-stop> [, <color-stop>]+
)

示例

radial-gradient(red, blue);

/* 形状 */
radial-gradient(circle, red, blue);
radial-gradient(ellipse, red, blue);

/* 位置 */
radial-gradient(circle at bottom, red, blue);
radial-gradient(circle at bottom right, red, blue);

/* 大小 */
radial-gradient(50px circle at top, red, blue);
radial-gradient(300px circle at bottom right, red, blue);

锥形渐变

锥形渐变是在一个圆周上逐步过渡颜色。

文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient

语法

conic-gradient(
  [ from <angle> | at <position> ]? ,
  <color-stop> [, <color-stop>]+
)

示例

conic-gradient(red, blue);
conic-gradient(from 90deg, red, blue);
conic-gradient(from 90deg at 10% 10%, red, blue);