CSS 渐变指南：线性、径向和锥形图案

CSS 渐变无需图片即可创建颜色之间的平滑过渡，实现零 HTTP 请求、无限缩放和极小的文件大小。现代 CSS 支持三种渐变类型，每种都有强大的配置选项。本指南通过你可以立即使用的实际示例来全面介绍它们。

线性渐变

最常见的类型，沿直线过渡：

/* 从上到下（默认） */
background: linear-gradient(#3B82F6, #8B5CF6);

/* 指定角度 */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* 使用方向关键词 */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

色标

控制每种颜色出现的位置：

/* 均匀分布（默认） */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* 自定义位置 */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* 硬停止（无过渡） */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

多色标渐变

创建复杂的颜色过渡：

/* 日落渐变 */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* 彩虹 */
background: linear-gradient(
  90deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

使用我们的渐变生成器可视化创建线性渐变——实时调整颜色、角度和色标。

径向渐变

从中心点向外辐射：

/* 从中心的圆形 */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* 椭圆形（默认形状） */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* 自定义位置 */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

大小关键词

/* closest-side：渐变到达最近的边 */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner：渐变到达最远的角（默认） */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* 指定大小 */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

锥形渐变

像饼图一样围绕中心点旋转：

/* 基本锥形 */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* 饼图分段 */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* 从指定角度开始 */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* 自定义中心 */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

重复渐变

所有三种类型都支持重复图案：

/* 条纹图案 */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* 同心圆环 */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* 棋盘格（使用锥形） */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

叠加多层渐变

CSS 支持多背景，可实现复杂效果：

/* 图片上的渐变叠加 */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* 交叉线图案 */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

实用 UI 模式

渐变文字

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

渐变边框

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

动画渐变背景

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

性能考量

渐变由 GPU 加速，性能优秀：

渐变比等效图片渲染更快
background-size 影响渲染成本——较小的平铺更高效
避免直接为渐变颜色添加动画——改为对 background-position 添加动画
有多个色标的复杂渐变仍然比 PNG 更快

浏览器支持

所有现代浏览器都支持线性、径向和锥形渐变。锥形渐变是最新的，自 2020 年起在所有主要浏览器中都受支持（Chrome 69+、Firefox 83+、Safari 12.1+）。任何渐变类型都不需要浏览器前缀。

常见问题

如何创建两种颜色之间看起来不浑浊的平滑渐变？

浑浊渐变发生在颜色过渡经过色轮上的灰色区域时。解决方案：在中间点添加一个更亮色相的色标，使用 oklch 色彩空间（linear-gradient(in oklch, ...)）以获得感知均匀的过渡，或增加中间点颜色的饱和度。

渐变可以替代图片作为背景吗？

对于抽象图案、叠加层和装饰性背景——完全可以。渐变零加载时间、完美缩放且不需要 HTTP 请求。对于复杂的视觉效果或照片，仍然需要图片。许多现代设计将两者结合：在背景图片上叠加渐变。