工具指南

CSS 渐变指南：线性、径向与圆锥渐变

阅读约 3 分钟

CSS 渐变让你无需任何图片请求就能在浏览器中创建两种或多种颜色之间的平滑过渡。渐变在 CSS3 中引入，现已获得全面支持，从简单的双色淡入淡出发展为能够产生纹理、几何图案和立体效果的复杂视觉元素。本指南涵盖每种 CSS 渐变类型，详细解释语法，并展示可直接放入样式表的实用十六进制代码示例。

什么是 CSS 渐变？

CSS 渐变是一种特殊的 <image> 值。它以编程方式生成颜色过渡，即浏览器计算你所定义的色标之间的中间颜色。由于渐变是图像而非颜色，你需要通过 background-image 或简写属性 background 来应用它——而非 background-color。

CSS 中的三种渐变类型为：

  • linear-gradient() — 颜色沿直线过渡
  • radial-gradient() — 颜色从中心点向外辐射
  • conic-gradient() — 颜色围绕中心点旋转

每种类型还有一个 repeating-* 变体（repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()），用于在元素上平铺渐变图案。

线性渐变

线性渐变沿指定角度的直线绘制颜色过渡。

基本语法

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

direction 参数是可选的。不指定时，渐变从上到下流动（等同于 to bottom 或 180deg）。

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

/* 从左到右 */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* 对角线 */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

角度语法

角度从元素顶部顺时针方向计量。0deg 指向上方，90deg 指向右方，180deg 指向下方。

/* 从左下到右上的 45 度对角线 */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* 从左上到右下的 135 度对角线 */
background: linear-gradient(135deg, #667EEA, #764BA2);

一个常见用例是 Hero 区域背景。例如，从 #667EEA 到 #764BA2 的 135 度渐变，产生一种在白色文字后面效果很好的冷紫色对角线效果。

方向关键字

除角度外，你还可以使用方向关键字：

关键字 等效角度
to top 0deg
to top right 45deg
to right 90deg
to bottom right 135deg
to bottom 180deg
to bottom left 225deg
to left 270deg
to top left 315deg

关键字在代码审查时可读性更好，且具有自文档性。对于不落在对角线上的精确角度，才使用显式度数。

多色标

色标定义渐变线上每种颜色的起始和结束位置。你可以使用任意 CSS 长度或百分比作为位置。

/* 三色标渐变 */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* 定位色标 */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* 硬色标（无过渡） */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

硬色标技术——在同一位置设置两个色标——在颜色之间创建无混合的清晰边缘。这适用于旗帜风格设计、进度指示器或分屏背景。

带提示的色标

CSS 支持在两个色标之间设置中间点提示，让你控制插值快慢：

/* 渐变在蓝色区域停留更长时间 */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

30% 提示告知浏览器，蓝色 #3B82F6 和红色 #EF4444 之间过渡的中间点应出现在 30% 处，使蓝色持续更长时间，红色快速出现。

径向渐变

径向渐变从中心点向外辐射，创建圆形或椭圆形图案。

基本语法

background: radial-gradient(shape size at position, color-stop1, color-stop2);

所有参数均为可选。默认产生一个以元素为中心、延伸到最远角的椭圆形渐变。

/* 简单的中心径向渐变 */
background: radial-gradient(#FFF176, #F57F17);

/* 显式圆形 */
background: radial-gradient(circle, #A8E063, #2D6A4F);

形状

径向渐变可以是 circle（均匀半径）或 ellipse（默认，拉伸以适应元素）。

/* 圆形：各方向半径相同 */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* 椭圆：拉伸以适应元素尺寸 */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

尺寸关键字

尺寸控制渐变延伸的范围：

关键字 描述
closest-side 渐变在最近边缘结束
closest-corner 渐变在最近角落结束
farthest-side 渐变在最远边缘结束
farthest-corner 渐变在最远角落结束（默认） 
/* 左上角的小型聚光灯 */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

位置

at 关键字使用任意有效的 CSS 位置值设置渐变的中心点：

/* 偏心渐变，产生光照效果 */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* 底部中心聚光灯 */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

将渐变中心偏离元素中心可以创造光源效果，这是玻璃拟物化和深度效果中的常见技术。

圆锥渐变

圆锥渐变围绕中心点旋转颜色，类似于绘制饼图的方式。它比其他类型更晚加入 CSS，但现在已获得全面浏览器支持。

基本语法

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* 基本圆锥渐变 */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* 从 90 度开始 */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

用圆锥渐变制作饼图

圆锥渐变非常适合纯 CSS 饼图：

/* 饼图：40% 红色，35% 蓝色，25% 绿色 */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

计算很简单：百分比乘以 3.6 即为度数（40% × 3.6 = 144deg）。

用圆锥渐变制作色轮

循环遍历所有色相的完整圆锥渐变可以重现色轮：

background: conic-gradient(
  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%)
);
border-radius: 50%;

棋盘格和条纹图案

repeating-conic-gradient() 变体可以创建几何图案：

/* 棋盘格 */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

重复渐变

每种渐变类型都有一个重复变体，可以持续平铺所定义的图案：

/* 对角条纹 */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* 同心圆环 */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

重复渐变对于纹理效果非常高效——背景上水印风格的对角线，或瞄准镜美学风格的同心圆环。

渐变中的透明度

在渐变中使用 transparent 或 rgba() 值可以创建淡入淡出效果：

/* 底部淡出（下方内容保持可见） */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* 暗角效果 */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

注意 CSS 中的 transparent 是 rgba(0,0,0,0)——完全透明的黑色——在从彩色值过渡时可能产生意外的灰色条带。为避免这种情况，请使用颜色的完全透明版本：

/* 正确：蓝色的透明版本 */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* 错误：会产生灰色条带 */
background: linear-gradient(to right, #3B82F6, transparent);

叠加多个渐变

background 属性接受多个逗号分隔的值。每个渐变叠加在上一个之上：

/* 纯色背景上的对角线叠加 */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* 用渐变模拟噪点纹理 */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

叠加渐变减少了否则需要多个背景图片的 HTTP 请求，同时让你完全通过 CSS 控制颜色和尺寸。

CSS 渐变性能

渐变由 GPU 计算，通常效率较高。但在性能敏感场景中，有几个模式值得注意：

  • 动画渐变：CSS 无法在两个不同的 background-image 值之间过渡。动画渐变需要通过修改 CSS 自定义属性或使用 JavaScript 来实现。一个变通方法是对较大渐变的 background-position 进行动画处理。
  • 复杂重复图案：在大型元素上使用非常小的重复尺寸（2px 以下）会迫使浏览器计算数千像素的渐变，可能导致绘制性能问题。
  • 动画时避免对渐变背景使用 filter: blur()——这对 GPU 消耗较大，会导致卡顿。

对于渐变动画，结合使用 CSS 自定义属性和 @property 可以提供硬件加速的平滑过渡：

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

使用渐变生成器

虽然手写渐变对于理解语法很有价值，但渐变生成器 可以显著加快流程。你可以：

  • 使用可视化颜色选择器或直接输入十六进制代码来选取起止颜色
  • 通过滑块或数值输入设置渐变角度
  • 在精确位置添加多个色标
  • 实时预览不同元素尺寸下的渐变效果
  • 一键复制生成的 CSS

例如，要构建日落渐变，以 #FF6B6B 为起始颜色、#FFC300 在 50% 处、#FF3C00 为终止颜色，然后将角度设为 135 度。生成器输出可直接粘贴到样式表的 CSS。

将生成器与颜色转换器 结合使用，可以处理 HSL 或 OKLCH 值而非十六进制——OKLCH 等现代色彩空间能产生感知上更均匀的渐变，因为其亮度轴在所有色相上都是真正均匀的。

实用渐变配方

Hero 区域背景

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

深紫蓝色对角线，适合 SaaS 落地页。

卡片悬停效果

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

从 #F5F7FA 到 #C3CFE2 的微妙浅蓝灰色渐变。

霓虹发光按钮

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

从 #11998E 到 #38EF7D 的鲜艳绿色。

深色模式表面

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

深色模式卡片表面的微妙深紫蓝色。

网格渐变（用多层近似）

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

核心要点

  • CSS 提供三种渐变类型：linear-gradient() 用于直线过渡，radial-gradient() 用于圆形或椭圆形图案，conic-gradient() 用于围绕中心点的饼图式旋转。
  • 每种类型都有 repeating-* 变体，用于平铺渐变图案，适合纹理效果、条纹和几何图案。
  • 带百分比或像素位置的多色标可精确控制过渡发生的位置；在同一位置使用两个色标可创建无混合的硬边缘。
  • 使用零 Alpha 的 rgba()（而非裸 transparent 关键字）来避免颜色淡出时出现灰色条带。
  • 多个渐变可以在单个 background 声明中叠加，每个渐变位于上一个之上。
  • 渐变生成器 让你可以可视化构建复杂渐变，实时预览并一键导出 CSS。

相关颜色

black

#000000

blue

#0000FF

green

#008000

purple

#800080

white

#FFFFFF

相关品牌

Stripe

Payments infrastructure for the internet

1 种颜色

Linear

Linear is a better way to build software

4 种颜色

Circle

3 种颜色

Corner

2 种颜色

Dimensional

3 种颜色

Hex

8 种颜色

相关工具

渐变生成器

通过实时预览和可复制代码，创建精美的CSS线性和径向渐变。

打开工具