linear-gradient 是 CSS3 中的图像生成函数，用于创建平滑过渡的线性渐变背景。它直接在浏览器中生成图像（而不是引用外部图片文件），通过定义颜色过渡点和方向，实现两种或多种颜色的平滑过渡效果。

linear-gradient 是我们在设置页面背景经常用的工具，但它能实现的效果也许远超过我们所认知的。

语法

• 方向：可选，关键词（如 to right）或角度（如 45deg），默认 to bottom。

• 颜色：至少两个颜色值（支持 HEX/RGB/RGBA/HSL/HSLA/颜色名称）

• 位置：可选，定义颜色开始过渡的位置（百分比/像素）。

background: linear-gradient(
 [方向] [角度],  /* 渐变轴线 */
 [颜色1] [位置], /* 起点颜色 */
 [颜色2] [位置], /* 过渡颜色 */
 ...            /* 更多颜色 */
);

在我们不设置方向和角度的情况下，它默认的渐变方向是从上到下，即（to bottom）。通过linear-gradient属性可以实现很多复杂且好看的效果，比如网格背景、条纹信封效果、彩色光谱叠加、复杂几何图案等。

用法与案例

可以根据不同的配置，生成各种加载效果

1.基础方向渐变

通过设置不同方向或角度的颜色渐变。0deg 表示从下到上，角度值顺时针增加（如 90deg = to right）。

 /* 从上到下（默认） */
.div1 {
  background: linear-gradient(red, blue);
}
​
/* 从左到右 */
.div2 {
  background: linear-gradient(to right, red, blue);
}
​
/* 对角线：左下到右上 */
.div3 {
  background: linear-gradient(to top right, red, blue);
}
​
/* 使用角度：45度角 */
.div4 {
  background: linear-gradient(45deg, red, blue);
}

2.多颜色与位置控制

通过在颜色后面设置位置，来分配颜色从何位置开始显示。未指定位置时，浏览器自动平均分配颜色过渡点。

 /* 三色分段渐变（红→黄→蓝） */
.div5 {
    background: linear-gradient(to right,
        red 0%,
        /* 红色从0%位置开始 */
        yellow 50%,
        /* 黄色从50%位置开始 */
        blue 100%
        /* 蓝色到100%结束 */
   );
}
​
/* 不对称渐变（绿→中间黄→红） */
.div6 {
    background: linear-gradient(to bottom,
        green,
        yellow 70%,
        /* 70%处完成绿→黄过渡 */
        red);
}

3.透明度渐变（透明→实色）

 .div7 {
    background: linear-gradient(to top,
        rgba(255, 0, 0, 0),
        /* 完全透明红 */
        rgba(255, 0, 0, 1)
        /* 完全不透明红 */
   );
}

4.硬边渐变（类似色块分隔）

 .div8 {
  background: linear-gradient(
    to right, 
    red 0%, red 50%,   /* 前50%纯红色 */
    blue 50%, blue 100% /* 后50%纯蓝色 */
 );
}

5.重复线性渐变

 .div9 {
  background: repeating-linear-gradient(
    45deg, 
    yellow 0px,      /* 从0px开始黄色 */
    yellow 20px,     /* 20px处结束黄色 */
    black 20px,      /* 20px处开始黑色 */
    black 40px       /* 40px处结束黑色（重复单元） */
 );
}

通过重复性渐变可以设置很酷炫的效果。

6.网格背景

也可以通过设置多个linear-gradient属性值，来实现更复杂好看的效果。

 .grid-bg {
  background: 
    /* 水平线 */
    linear-gradient(to bottom, 
      transparent 95%, 
      rgba(0,0,0,0.1) 95%
   ),
    /* 垂直线 */
    linear-gradient(to right, 
      transparent 95%, 
      rgba(0,0,0,0.1) 95%
   );
  
  background-size: 20px 20px; /* 网格单元尺寸 */
}

通过配合**background-size**属性，控制每个渐变的尺寸（百分比/像素值）来实现网格效果。

7.条纹信封效果

 .envelope {
  background: 
    /* 左上角三角 */
    linear-gradient(135deg, 
      transparent 15px, 
      #f9f3e9 15px
   ),
    /* 右上角三角 */
    linear-gradient(-135deg, 
      transparent 15px, 
      #f9f3e9 15px
   ),
    /* 主背景色 */
    linear-gradient(to bottom, #f9f3e9, #f0e6d4);
  
  background-size: 
    50% 50%,  /* 左上三角尺寸 */
    50% 50%,  /* 右上三角尺寸 */
    100% 100%; /* 主背景尺寸 */
  
  background-position: 
    top left,  /* 左上定位 */
    top right, /* 右上定位 */
    center;    /* 主背景定位 */
  
  background-repeat: no-repeat;
}

通过配合**background-size**属性，控制每个渐变的尺寸（百分比/像素值），以及通过**background-position**属性来设置每个渐变的位置（top/left/center/坐标值）

8.彩色光谱叠加

 .spectrum {
  background: 
    linear-gradient(120deg, 
      rgba(255,0,0,0.6) 0%, 
      transparent 60%
   ),
    linear-gradient(240deg, 
      rgba(0,255,0,0.6) 0%, 
      transparent 60%
   ),
    linear-gradient(360deg, 
      rgba(0,0,255,0.6) 0%, 
      transparent 60%
   );
  
  background-size: 150% 150%;
  background-position: 
    top left, 
    top right, 
    center;
}

9.复杂几何图案

 .geometric {
  background: 
    /* 左上方块 */
    linear-gradient(45deg, 
      #ff6b6b 25%, 
      transparent 25%
   ),
    /* 右下方块 */
    linear-gradient(135deg, 
      #4ecdc4 25%, 
      transparent 25%
   ),
    /* 背景底色 */
    linear-gradient(to right, #1a1a1a, #333);
  
  background-size: 50px 50px;
  background-position: 
    0 0, 
    25px 25px;
}

渐变效果推荐

1.霓虹赛博朋克

视觉效果：紫色到荧光粉的强烈对比，科技未来感

 .btn-dynamic {
  background: 
    /* 顶部光晕 */
    linear-gradient(to bottom, 
      rgba(255,255,255,0.3) 0%, 
      transparent 80%
   ),
    /* 主渐变 */
    linear-gradient(135deg, #6a11cb, #2575fc);
  
  transition: all 0.3s;
}
​
.btn-dynamic:hover {
  background: 
    linear-gradient(to bottom, 
      rgba(255,255,255,0.5) 0%, 
      transparent 80%
   ),
    linear-gradient(135deg, #6a11cb, #2575fc);
  box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
}

2.日出熔岩

视觉效果：模拟火山喷发的炽热色调

 .lava-sunrise {
  background: linear-gradient(to right,
    #ff512f 0%,
    #f09819 50%,
    #ff512f 100%);
}

3.北极光

视觉效果：模仿极光的流动绿紫渐变

 .northern-lights {
  background: 
    linear-gradient(135deg, #00c9ff 0%, #92fe9d 25%, transparent 50%),
    linear-gradient(225deg, #ff7e5f 0%, #feb47b 25%, transparent 50%),
    linear-gradient(315deg, #d66d75 0%, #e29587 25%, transparent 50%),
    radial-gradient(circle, #200122 0%, #6f0000 100%);
  background-blend-mode: screen;
}

4.暗黑模式渐变

视觉效果：深色模式下的微妙层次感

 .dark-layers {
  background: 
    radial-gradient(circle at top right, 
      rgba(41,39,45,0.8) 0%, 
      transparent 40%),
    radial-gradient(circle at bottom left, 
      rgba(26,24,32,0.8) 0%, 
      transparent 40%),
    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

5.流体彩虹

视觉效果：流动的彩虹色背景（需配合动画）

 .fluid-rainbow {
  background: linear-gradient(-45deg, 
    #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}
​
@keyframes gradient-flow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}