# CSS 渐变

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient>

The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

## 使用例子

```css
linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.6),
      rgba(255, 0, 0, 0) 66%
    ),
    linear-gradient(127deg, rgba(0, 255, 0, 0.6), rgba(0, 255, 0, 0) 66%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0) 66%)

linear-gradient(to left top, rgba(111, 222, 255, .6), rgba(222, 111, 255, .6))

linear-gradient(0deg, blue, green 40%, red)

linear-gradient(.25turn, red, 10%, blue)
```

## 疑问

MDN 中的这句话是不是有问题？

> Because &lt;gradient&gt;s belong to the &lt;image&gt; data type, they can only be used where &lt;image&gt;s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the &lt;color&gt; data type.

经过测试，没有问题。background-color 确实无法和 linear-gradient() 一起使用。但是，可以和 background 一起使用。

## 有趣例子/深入理解

- <https://projects.verou.me/css3patterns/>
- <http://standardista.com/cssgradients/>
- <https://cssgenerator.org/gradient-css-generator.html>
- <https://cssgradient.io/blog/css-gradient-examples/>
- <https://kittygiraudel.com/2013/02/04/dig-deep-into-css-gradients/>
- <https://www.bram.us/2021/10/13/how-to-create-the-stripe-website-gradient-effect/>
- <https://whatamesh.vercel.app/> 生成动画渐变效果