这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left。

如上图例子
CSS代码：

body {
    background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
如果渐变是从元素上边的紫色过度到下边的绿色，要使用 to bottom 关键字。

CSS代码：
html, body {
    width: 100%;
    height: 100%;
body {
    background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);
另外，还可以用 to bottom right 这样的关键字指定渐变的角度。使渐变从元素的左上角开始，到元素的右下角结束。

CSS代码：
html, body {
    width: 100%;
    height: 100%;
body {
    background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF);
过渡所用的颜色可以使用CSS中任何一种颜色值，可参考【CSS】着色与透明
渐变方向也不局限于只能使用关键字，还可以使用角度值指定渐变的方向。
角度值的写法：

在0~360之间的数字后面加上deg，指定过渡在哪个方向结束。
例如， 0deg 表示元素的顶边，所以过渡从底边开始，到顶边结束。
也就是说，

background-image: linear-gradient(to top, #7A88FF, #7AFFAF);

background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);
角度的值按顺时针方向旋转，因此，90deg 表示元素的右边（与 to right 相同），180deg 表示元素的底边（与 to bottom 相同），270deg 表示元素的左边（与 to left 相同）。
使用角度值时，浏览器会绘制一条经过元素中心点的假象线。指定的角度就是这条线的角度，同时还指明过度在哪里结束。
浏览器会绘制一条经过元素中心点的假想线，指向45°刻度，因此，这个过渡从元素的左下角开始，到右上角结束。
这里推荐一个很好玩的网站：

https://codepen.io/thebabydino/full/qgoBL
可以根据需求添加任意多个颜色。额外添加的颜色叫色标（color stop）。懂PS的对色标就更容易理解了。

body {
    background-image: linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8);
背景色从左到右开始渐变，最左边是玫红，在元素宽度20%的位置变成青色，80%的位置变成黄色，最后是蓝色。
色标的位置不一定要用百分比，也可以用像素或者em值。不过百分比是最灵活的，会随着元素的宽度或高度而变化。
使用多色渐变时，第一个颜色和最后一个颜色无需指定位置，因为浏览器会嘉定第一个颜色从0%的位置开始，最后一个颜色在100%的位置结束。

除非想把第一个颜色或最后一个颜色的位置放在指定的位置开始，才需要专门定位。
CSS代码：

html, body {
    width: 100%;
    height: 100%;
body {
    background-image: linear-gradient(to right, #E94E65 20%, #15A892 40%, #A89215 60%, #1574A8 80%);
微信订阅号：Rabbit_svip
第一个颜色值（#E94E65）也有位置值（20%）。因此，元素横向前20%宽度的背景色是纯粉红色。从20%的位置开始才由粉红色变成青色。直到40%的位置完全结束粉红色。
此外，因为元素可以有多个背景图，所以也能有多个渐变背景。

CSS代码：
html, body {
    width: 100%;
    height: 100%;
body {
    background-image: 
        linear-gradient(to bottom, cyan, transparent),
    linear-gradient(225deg, magenta, transparent),
    linear-gradient(45deg, yellow, transparent);
在【CSS】同时使用多个背景图这个笔记的最后有记到，使用多个背景图时，最先用到的背景图会在最上层。
IE的支持程度
IE9及之前的版本都不支持渐变。如果一定要使用渐变，要为IE9及之前的版本提供后备颜色。
CSS代码：
html, body {
    width: 100%;
    height: 100%;
body {
    background-color: #FC0;
    background-image: linear-gradient(to bottom, #900, #FC0, #900);
IE9会应用指定的背景色，因为不支持线性渐变，会跳过第二个声明。其他浏览器会应用背景色，还会创建渐变，渐变会覆盖背景色。
如果使用的是RGBA颜色（RGBA颜色可见【CSS】着色与透明笔记），设置了一定程度的透明度，且不想透过渐变看到背景色。此时可以使用简写的         background 属性，覆盖 background-color 属性（这是简写的background属性的一个比较怪异的行为，可见【CSS】背景基础知识简写部分）。所以可以这样写。
CSS代码：
html, body {
    width: 100%;
    height: 100%;
body {
    background-color: #FC0;
    background: linear-gradient(to bottom, rgba(153, 0, 0, .5), #FC0, rgba(153, 0, 0, .5));
平铺的线性渐变
background-image: repeating-linear-gradient();
平铺的线性渐变其实就是在普通的渐变基础上多了一个重复的效果。

平铺的线性渐变定位色标用的是像素值或者em值，这里百分比不是很好用，至少我理解起来比较费劲。
先看效果图
body {
    background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px);
上面例1中，定义了渐变的角度，浏览器从左下角开始绘制渐变，前20像素是绿色，此后直至30像素的位置过渡到紫色，然后直至40像素的位置再过渡到绿色。绘制完这个渐变后，浏览器会像平铺图像那样把这个渐变铺满整个背景。
例2  CSS代码：
html, body {
    width: 100%;
    height: 100%;
body {
    background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 20px, #6666CC 30px, #66CC99 30px, #66CC99 40px);
body {
    background-image: radial-gradient(circle at 20% 40%,#99CCCC 20%, #7171B7 40%, #CCCC99 60%, #4F9C9C 80%);
body {
    background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 40px, #CCCC99 60px, #4F9C9C 80px, #99CCCC 100px);
body {
    background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px);