HandyTools Hub

← 全部指南

CSS Gradient 详解：linear、radial、conic，以及真正好看的渐变模式

2026-08-21

渐变是 CSS 里人人都在粘贴、却没人真正理解的功能。你写 background: linear-gradient(to right, #f00, #00f) 得到一条红到蓝的色带——等你想做点好看的，结果不是脏糊一片就是断层一堆。问题的解法是一次心智模型切换：渐变不是颜色，而是在区域内绘制平滑过渡的函数。 一旦看清它的两个输入——几何(渐变指向哪里)和停止点(哪些颜色、出现在哪里)——剩下的一切都是可以组合的图案。

渐变是函数，不是颜色

linear-gradient(...)、radial-gradient(...)、conic-gradient(...) 都是图像函数。凡是能放图片的地方都能用——background-image、background、mask-image、甚至 border-image。所以你要写 background-image: linear-gradient(...)，而且渐变能和背景色共存(background: #0a0a0a linear-gradient(...))——渐变透明的地方会透出底色。

三个函数的通用形状一致：

<函数>( <几何>, <颜色停止点>, <颜色停止点>, ... )

几何随函数而异；颜色停止点是共通的，学会一次即可。

linear-gradient：方向与颜色停止点

线性渐变有一个方向和一组颜色停止点：

background-image: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
  • 方向可以是关键字——to top、to right、to bottom right——或角度如 45deg(自”上”起顺时针计算)。
  • 每个停止点是一个颜色和一个可选位置。省略位置时浏览器等距分布；给出位置(0%、50%、120px)时浏览器在它们之间插值。
  • 两个停止点最常见，但数量不限。位置列表正是力量所在——尤其下面这一招：
/* 硬停：两个颜色在同一个位置 = 锐利的边缘，不混合 */
background-image: linear-gradient(to right, #f00 0%, #f00 50%, #00f 50%, #00f 100%);

这是左红右蓝、边界像刀切一样的两半。硬停是下面所有图案的积木。

条纹与棋盘格：把渐变当纹理

因为渐变是图片，可以用 background-size 平铺并重复。条纹直接从 repeating 渐变里长出来：

background-image: repeating-linear-gradient(
  45deg,
  #f2f2f2 0px, #f2f2f2 12px,
  #d4d4d4 12px, #d4d4d4 24px
);

这样读：“画一块 24px 的斜纹瓷砖，包含两条硬停条纹，然后重复。“改角度和宽度，就能得到斑马纹、糖果条纹或进度条纹理。

棋盘格是两张叠加的渐变(或一张带两个硬停的渐变被平铺)：

background-image:
  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

因为两层都半透明，错位会让交替方格透出底层颜色。这正是图像工具用来展示透明区域的技法。

radial 与 conic：向外放射的渐变

  • radial-gradient 从中心向外绘制：radial-gradient(circle at 30% 30%, #ff9, #333)。可选的 ellipse/circle、尺寸(closest-side、100px 80px)、以及 at <位置>。经典用途：聚光灯/光晕、暗角、卡片背后柔和的内部高光。
  • conic-gradient 绕着一个点绘制，像色环：conic-gradient(from 0deg, #f00, #0f0, #00f, #f00)。用途：纯 CSS 画的饼图、色轮、品牌标志背后的”太阳光芒”背景。

两者都吃同样的颜色停止点列表，硬停也照样生效——conic 渐变在 0%、33%、67%、100% 放硬停，就是四块饼。

透明：渐隐、遮罩与叠加层

停止点颜色不必是不透明的。渐变到 transparent 是做图片渐隐、压暗遮罩、构建 mask 的手段：

/* 让图片底部渐隐，文字可以坐上去 */
background-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);

/* 遮罩照片，让边缘融化消失 */
-webkit-mask-image: linear-gradient(to right, transparent, #000 20%);

第二个例子把渐变当作遮罩：mask 不透明处照片完整显现，透明处消失。因为渐变是图像函数，它们在 mask-image / -webkit-mask-image 里和 background-image 里一样可用。

为什么渐变难看：四个常见原因

  1. 两个停止点太接近。 大元素上 #333 到 #444 读作脏，不读作纵深。要么拉开停止点距离，要么中间加一个停止点。
  2. 色带断层。 很长的渐变中间有时能看到明显的横向色带，而不是平滑的坡。在低色深屏幕上更明显；缓解办法是轻微抖动——叠一层淡淡的噪点——或者避免让渐变横跨过大的区域。
  3. 中点位置不对。 默认过渡中点落在两停止点正中间。linear-gradient(#000, #fff) 会黑很久然后才跳到白。移动中点：linear-gradient(#000 0%, #fff 90%) 让亮的一端更早占据主导。
  4. 忘了透明也是一种颜色。 linear-gradient(#000, transparent) 和 linear-gradient(#000, rgba(0,0,0,0)) 是一回事——但 #000 到 transparent 在彩色页面上会透过背景混合，而这通常正是叠加层想要的。

快速参考

  • 渐变是图像函数：linear-gradient、radial-gradient、conic-gradient，可用于 background-image、mask-image 等。
  • 形状：<函数>(<几何>, <颜色停止点>...)。几何对线性是方向/角度，对径向是形状+尺寸+位置，对锥形是起始角。
  • 停止点 = 颜色 [位置]；省略位置时浏览器等距分布。
  • 两个颜色在同一位置 = 硬停——锐利边缘，条纹和棋盘格的基础。
  • 用 background-size 平铺渐变得到重复纹理；repeating-linear-gradient 把重复直接烘焙进去。
  • conic-gradient(from 0deg, ...) 绕点绘制——纯 CSS 的饼图和色轮。
  • 用渐变到 transparent 做渐隐与遮罩；渐变不只是背景，还能当 mask。
  • 断层和发脏是几何/停止点问题，不是该避开渐变的理由。

不想手算停止点，CSS Gradient Generator 给你 linear/radial/conic 的实时预览并直接复制 CSS。渐变和盒阴影是天然搭档——卡片背后一道柔和的 radial 渐变加上分层阴影，就是现代 UI 纵深的一半。

相关工具