彩虹线性渐变CSS是一种CSS渐变效果，可以使背景从一种颜色渐变到另一种颜色。通过使用线性渐变，渐变的方向可以从上到下、从左到右或对角线方向进行。

语法

background: linear-gradient(to direction, color-stop1, color-stop2, ..., color-stopN);

• to direction定义渐变方向。除了使用水平方向的left和right，垂直方向的top和bottom以外，还可以使用角度表示方向，如45deg表示渐变方向为从左上到右下。
• color-stop指定渐变颜色和位置。可以设置多个颜色，每个颜色都定义了它的渐变位置和配色。位置可以用百分比或以px、em和rem等为单位的长度表示。

示例

下面是一个简单的渐变示例，使用一个自下而上的线性渐变创建了一个彩虹色背景，由红色开始，紫色结束：

background: linear-gradient(to top, #ff0000, #ff00ff, #0000ff);

更多示例

水平方向渐变

使用水平方向的线性渐变可使渐变从左侧开始，结束于右侧：

background: linear-gradient(to right, #ff0000, #0000ff);

垂直方向渐变

使用垂直方向的线性渐变可使渐变从顶部开始，结束于底部：

background: linear-gradient(to bottom, #ff0000, #0000ff);

对角线渐变

使用对角线方向的线性渐变可使渐变从左上角开始，结束于右下角：

background: linear-gradient(45deg, #ff0000, #0000ff);

颜色停止位置

可以使用百分比或长度表示渐变中不同颜色的停止位置。下面的示例将在70%处停止黑色，渐变颜色将从白色混合到透明：

background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.7));

总结

彩虹线性渐变CSS是一种快速实现渐变背景效果的方式。通过混合多个颜色和位置，可以创建多种不同的颜色过渡效果。