css 背景渐变色用法案例

下面给你一份「纯 CSS 渐变色背景」速查手册 + 10 个可直接复制的小案例，涵盖最常用场景：线性、径向、锥形、多色、动画、文字遮罩、边框、按钮、卡片、星空。所有代码均「零依赖」，粘进 <style> 就能玩。

0. 语法 5 秒速记

/* 线性 */
background: linear-gradient(角度或方向, 颜色1 停点1, 颜色2 停点2, ...);

/* 径向 */
background: radial-gradient(形状 大小 at 位置, 颜色1 停点1, ...);

/* 锥形（IE 不支持） */
background: conic-gradient(颜色1 停点1, ...);

1. 清爽对角线（卡片常用）

.diagonal-soft {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

2. 双色分割 Banner（上下 50%）

.split-banner {
  background: linear-gradient(to bottom, #ff9a9e 50%, #fecfef 50%);
}

3. 径向聚光灯（按钮 hover）

.radial-btn {
  background: radial-gradient(circle at 50% 50%, #f6d365 0%, #fda085 100%);
  transition: .4s;
}
.radial-btn:hover {
  background-size: 150% 150%; /* 放大制造动感 */
}

4. 多色条纹（进度条 or 彩蛋）

.rainbow-stripe {
  background: repeating-linear-gradient(
    45deg,
    #ff006e 0px  10px,
    #8338ec 10px 20px,
    #3a86ff 20px 30px,
    #06ffa5 30px 40px
  );
}

5. 锥形渐变仪表盘（IE 不支持）

.conic-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red 0deg 60deg,
    orange 60deg 120deg,
    yellow 120deg 180deg,
    green 180deg 240deg,
    blue 240deg 300deg,
    purple 300deg 360deg
  );
}

6. 文字渐变填充（mask 法）

.gradient-text {
  background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

<h1 class="gradient-text">Hello Gradient</h1>

7. 渐变边框（border-image）

.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59) 1;
}

8. 悬浮光晕按钮（伪元素 + 动画）

.glow-btn {
  position: relative;
  z-index: 1;
  background: linear-gradient(45deg, #2193b0, #6dd5ed);
  border: none;
  color: #fff;
  padding: 12px 28px;
  overflow: hidden;
}
.glow-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5);
  z-index: -1;
  opacity: 0;
  transition: opacity .4s;
}
.glow-btn:hover::before {
  opacity: 1;
}

9. 动态流动背景（纯 CSS 动画）

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

10. 星空粒子（径向随机小圆）

.starry-night {
  background:
    radial-gradient(ellipse at top, #1b2735 0%, #090a0f 100%),
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, #fff, transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, #fff, transparent),
    radial-gradient(2px 2px at 160px 30px, #ddd, transparent);
  background-size: 200px 100px;
  background-repeat: repeat;
}

11. 一行代码「超柔光」背景（Shopify 卡片最爱）

.soft-light {
  background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

12. 小技巧合集

把上面 class 直接贴到元素就能看效果，改颜色、角度、停点即可快速拼出你自己的品牌渐变。祝玩得开心！