css-gradient · CSS 渐变

CSS 渐变：从一条渐变线到「按字符上色」

渐变在 CSS 里不是颜色，而是一张 <image>——这一个事实串起它几乎所有用法：既然是图像，就能被 background-size 量尺寸、被 background-position 定位、被 background-clip: text 裁进字形。本系列顺着这条线，把一段常见的一行式 background: linear-gradient(90deg, crimson 0 0) 0/calc(var(--n)*1ch) no-repeat text pink 逐段拆开：先认渐变线与色标（包括 crimson 0 0 为什么是实色），再看渐变怎么当背景被裁剪定位，然后灌进字形做出「前 N 个字变色」的效果；顺手认识 background-clip 的另一个兄弟值 border-area——把渐变裁进描边区做出渐变边框；随后两节是 radial-gradient 与 linear-gradient 两个几何专题——讲清 radial 那四个容易记混的 size 关键字，以及 linear 的方向语法与 to 角的 magic corner。每节一块实时重算的演示区，拖滑块、切换 pill，旁边 CSS 同步生成，所见即所得。其中一行式里的 var(--n) 是 CSS 自定义属性，基础概念见姊妹系列 CSS 自定义属性 · var()。

本页路线：渐变线与色标 → 插值色彩空间 → 渐变作背景 → 雪碧图 → 灌进字形 → 描边裁剪 border-area → radial 几何 → linear 方向。

1 · 渐变线与色标：三种渐变，色标全览

一个渐变 = 一条渐变线（linear 沿角度、radial 沿半径、conic 绕角度）+ 钉在线上的若干色标 color stop。本节把色标的几种用法一次讲全：默认平滑插值；给相邻两个色标同一个位置，过渡区宽度归零 → 硬切（条纹 / 纯色块的根基）；多个色标省略位置时自动均分；再加上渐变作背景与灌进字形两节都依赖的关键写法 crimson 0 0——双位置语法把一个色标写满整条线，于是「渐变」其实是一块实色（如今更简：单个色标 linear-gradient(crimson) 即可）；最后用 repeating- 把一段花纹无限平铺。

1.1 · 三种渐变：渐变线的三种走法

三种渐变只是「渐变线」的形状不同，色标语法完全一致。linear-gradient 的角度从 12 点钟方向起、顺时针（0deg 朝上、90deg 朝右）;conic-gradient 同样绕中心旋转，但颜色扫过角度而非沿直线推进——因此它能画饼图、色相环。radial-gradient 从圆心向外，circle 是正圆、ellipse 跟随盒子长宽比——它的尺寸关键字（closest-side / farthest-corner 等）与 at 定位另有讲究，见 radial-gradient 几何专题。

1.2 · 色标位置：从平滑插值到硬切

双位置语法 颜色起止 是省略写法。crimson 0 0 等价于 crimson 0, crimson 0——同一个颜色从位置 0 到位置 0，再加上「线外区域取最近色标的颜色」的规则，整条线就被这一个 crimson 填满。于是 linear-gradient(90deg, crimson 0 0) 渲染出来是一块纯 crimson。不直接用 background-color: crimson 的原因是：纯色背景无法被 background-size 缩放，而渐变是「图像」，能被裁成任意尺寸——这是渐变作背景按尺寸涂色、以及灌进字形「按字符上色」的关键支点。

1.3 · 单色标：一个颜色就是一张渐变图

渐变现在允许「单个色标」。linear-gradient(crimson) 已是合法写法——整条渐变线被这唯一一个颜色填满，渲染成一块纯 crimson。它把过去为求纯色而写的 crimson 0 0（双位置缩写）、crimson, crimson（重复同色）进一步简化：既不必再凑第二个色标，也不必写位置。三者效果完全等价，上面可切换对照。同样的放宽适用于 radial-gradient / conic-gradient 及其 repeating- 版本。

这条放宽来自 CSS Images Level 4 对 <color-stop-list> 文法的修订（单色标提案出自 Lea Verou）,Chrome / Firefox / Safari 均已落地；需要兼容更早的浏览器时，旧的 color 0 0 写法仍通用，可作回退。另注意：若只想要纯色背景,background-color: crimson 就够；把它写成渐变的意义在于它是图像——能被 background-size 缩放、按 background-position 定位，这正是渐变作背景与灌进字形两节依赖的支点。

1.4 · 多色标：不止两种颜色

不写位置时，色标自动均分：第一个落 0%、最后一个落 100%、中间的等距排开（N 个色标 → 间距 100% / (N−1)）。想偏移就给某个色标显式位置；若后一个色标位置比前一个小，它会被钳到前者的位置（规范规定位置单调不减，故能制造一段隐式硬切）。另外，两色标之间放单独一个裸百分比——red, 30%, blue 里的 30% 不是色标，而是过渡提示 color hint：它把「红蓝各占一半」的插值中点挪到 30% 处，让过渡偏向一侧。

1.5 · repeating-gradient：把一段花纹无限平铺

repeating-linear-gradient 把第一段色标序列（这里是「一段玫红 + 一段白」）沿渐变线无限重复。每段都用双位置硬切写成 color 起止，相邻两段位置首尾相接，就得到清爽的斑马条纹；把第二段颜色也设成半透明，就是进度条 / 警示带常见的斜纹。注意它仍是一张没有内在尺寸的图像——平铺的「节拍」由色标位置(px)定，而非 background-size。

2 · 插值色彩空间：in oklab——在哪个空间里混色

上一节的色标决定「哪些颜色、钉在线上哪个位置」；但相邻两个色标之间那段过渡经过哪些中间色，取决于在哪个色彩空间里做插值。渐变函数允许在色标列表最前面（与方向并列）加一个 in <color-space> 前缀指定它，例如 linear-gradient(in oklab, hsl(80 90% 50%), red)。关键的一点：端点颜色写成什么格式（hsl() / 具名色 / #hex）与插值空间无关——端点会先被转换到 in 指定的那个空间，再在那里逐点求中间色。本节并排几条用真实 in 语法渲染的渐变带，对比同一对端点在 sRGB / OKLab / OKLCH / HSL 里走出的不同路径。

2.1 · 同一对端点，在不同空间里走出不同路径

未写 in 时的默认空间是 oklab，不再是早年的 sRGB。CSS Color 4 规定：宿主语法没指定插值空间时，一律默认 oklab——所以 linear-gradient(red, blue) 与 linear-gradient(in oklab, red, blue) 渲染完全相同（上方 in oklab 那条已高亮标出）。sRGB 直接对 gamma 编码后的 r/g/b 通道取平均，蓝 → 黄这类跨色相过渡的中点会塌成灰浊;OKLab 的坐标按人眼感知校准，沿直线走中段明度、饱和度都更均匀，不发灰。

色彩空间分两类。其一矩形 rectangular（srgb / srgb-linear / oklab / lab / display-p3 / xyz 等）——把颜色当三维坐标，沿直线插值；其二极坐标 polar(hsl / hwb / lch / oklch)——其中一维是 hue 色相角，插值时 hue 沿色相环走弧、另两维（明度 / 饱和度等）仍走直线。极坐标空间因此会绕出更鲜艳的中间色，代价是要额外决定 hue 往哪个方向绕——见下一个 demo。

2.2 · 极坐标空间的 hue 走法：shorter / longer / increasing / decreasing

极坐标空间多一个 hue 插值方法(<hue-interpolation-method>)，四选一：shorter hue（默认，沿色相环短弧绕，可省略不写）、longer hue（走长弧——故意绕远，常用来让两个相近色之间扫过一整圈彩虹）、increasing hue（hue 角只增，顺色相环方向）、decreasing hue（hue 角只减，逆方向）。语法写成 in oklch longer hue——末尾的关键字 hue 不能省。矩形空间没有 hue 维，自然不接受这些方法。

3 · 渐变作背景：它是一张能被裁剪的「图像」

渐变不是颜色，而是 <image>——和 url(...) 同属一类值。既然是图像，就能被 background-size 缩放、background-position 定位、background-repeat 决定平不平铺。本节拆开 background 简写的各段，再聚焦那个常见却少有讲解的写法：0/calc(var(--n) * 1ch) no-repeat——「贴在最左、宽度恰好 N 个字符、不重复」。这正是灌进字形「按字符上色」的核心部件。

3.1 · background 简写：一段值里塞了七件事

background 简写一层最多塞：<image> position / size repeat origin clip attachment color。其中 position 与 size 之间用斜杠 / 隔开（否则浏览器分不清「50% 是位置还是尺寸」）。底层方格是透明区——no-repeat 时图像只占 size 那一块 tile，其余露出底色；切到 repeat 就沿两轴平铺成网格铺满。（这里特意用带方向的渐变当图像：纯色块平铺看不出边界，有花纹才看得见「铺」这件事。）

3.2 · 0 / calc(var(--n) * 1ch)：按「字符宽」量尺寸

1ch = 当前字体里数字「0」的推进宽度。在等宽字体下每个字符都是这个宽度，所以 calc(var(--n) * 1ch) 恰好等于前 N 个字符的总宽——那块实色 crimson 不多不少盖住前 N 格。把它和 0（position 贴最左）、no-repeat（只画一遍）凑齐，就是一个由变量 --n 驱动、单位是「字符」的定宽色块。改 --n，色块就一格一格生长。

3.3 · 多层背景：逗号叠放，末尾收一个底色

background 用逗号分隔多层，先写的在上、后写的在下。而 background-color 是独立属性，在简写里只能写进最后一层、永远垫在最底——所以灌进字形那条 $\dots no-repeat text pink$ 里的 pink 就是背景底色：顶上的渐变只盖住前 N 个字符，剩下的字露出 pink 底。多层背景加末尾底色，正是这种写法的骨架。

4 · 雪碧图：用 background-position 切图，随 background-size 缩放

上一节确认了渐变只是 <image> 的一种，而 url() 指向的位图 / SVG 同样适用那套 size / position / repeat 规则。把许多小图标拼进一张大图（sprite sheet，雪碧图），只请求一次、用一个 url() 就能显示其中任意一格——做法是把盒子裁成一格大小，再用 background-position 把整张图平移，让目标那格正好落进盒子。真正的难点不在切图，而在缩放：一旦给了 background-size，位移量必须跟着同比变，否则切错格或切出半格。下面把 background-size 的几种取值（原生 auto / 定长 px / 百分比 / cover）逐一摆开，看雪碧图在每种取值下该怎么处理。

4.1 · 基本原理：盒子裁一格，position 平移整张图

三件套缺一不可：background-image 指向整张图、background-repeat: no-repeat 只画一遍、background-position 给负位移把后面的格子拽进盒子。位移是负的——-128px 表示把整张图向左推 128px，于是原本在 128px 处的第三格挪到了盒子左缘。盒子的 width/height 必须等于一格，多出来的格被盒子边界裁掉（overflow 默认对背景就是裁切）。

4.2 · background-size 的几种取值：雪碧图各自怎么处理

原生 auto：不缩放，位移、盒子都按整张图的原始像素算——最简单，但显示尺寸被锁死成原生一格，想放大缩小做不到。定长 px：把整张图缩放到 $N\times D$ 宽，于是每格变成 D，位移也必须改成 D 的倍数( $-i\times D$ )；只改盒子大小却忘了缩 background-size 与 position，就是右边那个切错的反例。cover / contain 对雪碧图基本是错的：它们让整张图去填满 / 适配单格盒子,N 格被压进一格，网格彻底错位。

4.3 · 百分比定位：为什么它能「免算」自动对齐

定长 px 每换一个尺寸都要重算位移，百分比则一次写定、随盒子自适应，核心是 background-position 百分比的对齐语义——它不是「图左缘移动 P%」，而是把图的 P% 那个点，对齐到容器的 P% 那个点。换成位移就是一个减法：

把图横向放大到 N 倍盒宽(background-size: 600% 100%)，再让 $position-x = i/(N-1) \times 100%$ ：代进减法，缩放因子 D 自动消掉，落点恰好是 $i\times D$ ——第 i 格不偏不倚。因此这套写法不依赖具体像素：盒子多大、DPR 多少都对，是响应式雪碧图最干净的解。注意百分比定位要求各格等距排布；分母是 $N-1$ 而非 N，因为 0% 贴左缘、100% 贴右缘，N 个落点把 [0,100%] 等分成 $N-1$ 段。

4.4 · 这张雪碧图根本不是文件：data: 内联 SVG 与转码

前面几节生效的 CSS 都写成 url(sprite.svg)，像在引用一个外部图片文件——但这一节演示用的雪碧图没有文件：它是一段 SVG 文本，经 data: URI 直接内联进 background-image（见本页源码的 buildSheet()）。url() 能放的不止外部位图与渐变，还能放一个 data: URI 把整张图的字节嵌进 CSS——对矢量的 SVG 尤其合适：零请求、随 DPR 永远清晰、还能用 CSS 变量改色。代价是 SVG 文本必须先转码，才能安全地塞进 url()。

data: URI 的语法是 data:[<mime>][;base64],<数据>。SVG 是文本，本可直接跟在逗号后，但它此刻身处 url() 内，凡在 URL 里有特殊含义的字符都得回避——头号陷阱是 #:CSS 颜色 #e11d6b 的 # 会被解析成 URL fragment 的起点，把后半段 SVG 悄无声息地截掉。两条转码路线：其一 URL 编码（把 # / < / > / % 等转成 %NN，并把 SVG 内部属性改用单引号以省去双引号的转义），文本可读、体积最小、对 gzip 友好，是 SVG 的首选；其二 ;base64，整段重编码，任意字节都安全，但体积约 +33% 且不可读、不利压缩——位图(png/jpg)通常只能走它。手写时不必死记该转哪些字符，用编码器转换即可（见下方 URL-encoder for SVG）。另注意 charset：文本 data URI 默认 US-ASCII,SVG 里若含中文等非 ASCII 字符，需按 UTF-8 编码（或干脆走 base64）。

5 · 把渐变灌进字形：从渐变文字到「按字符上色」

background-clip: text 把元素的整张背景裁剪进字形轮廓，再用 -webkit-text-fill-color: transparent 把字的填充挖空，背景就透过字形显出来。把前面几节的零件凑齐——实色 crimson 0 0（见渐变线与色标）+ 0/calc(var(--n)*1ch) no-repeat 定宽与末尾底色 pink（见渐变作背景）+ 这里的 clip，就能让一行字的前 N 个字符变红、其余保持粉。这就是那条常见一行式背后的完整机制。

5.1 · 渐变文字：背景裁进字形

5.2 · 按字符上色：那条一行式的全貌

逐段对照那条一行式 background: linear-gradient(90deg, crimson 0 0) 0/calc(var(--n)*1ch) no-repeat text pink:

linear-gradient(90deg, crimson 0 0)——一块实色 crimson（双位置缩写，见渐变线与色标）;
0 / calc(var(--n)*1ch)——贴最左、宽 N 个字符（见渐变作背景）;
no-repeat——只画一遍，后面不铺；
text——简写里的 background-clip: text，把整张背景裁进字形；
pink——背景底色，垫在最底，露给第 N 个字之后的字。

合起来：前 N 个字落在 crimson 块上、其余落在 pink 底上，再被 clip 进字形 → 前 N 字红、其余粉。

实测警告：这条一行式里的 text 当前各浏览器并不接受。text 只是 background-clip 的合法取值，写进 background 简写里会让整条声明作废（本节实测 Chromium 下设了这串后 background-image 直接落空）。所以正确写法是把 clip 拆成独立 longhand:background: linear-gradient(90deg, crimson 0 0) 0/calc(var(--n)*1ch) no-repeat pink; 再补一行 background-clip: text（配 -webkit- 前缀）。本节 demo 已自动检测并回退到这种拆开写法，所以呈现的效果正确——但不要把那条带 text 的简写原样用进项目。

为什么「按字符上色」默认用等宽字体？1ch 是「0」的推进宽度，只有等宽字体里它才等于每个字符的实际宽度，calc(var(--n)*1ch) 才精确切在第 N 个字符的边界。切到比例字体试试：i 窄、m 宽，红粉分界就会和字符缝对不齐。要逐字符精确，要么用等宽字体，要么改用 JS 测量每个字的实际宽度。

6 · background-clip: border-area：把渐变裁进「描边区」

灌进字形用 background-clip: text 把整张背景裁进字形轮廓；CSS Backgrounds Level 4 又给 background-clip 添了一个新值 border-area——它把背景裁进「边框描边所占的区域」：跟随 border-width 的宽度、border-style 的笔形（实线 / 虚线 / 点线 / 双线），只是忽略 border-color 的透明度——于是把 border-color 设成 transparent、背景给一段渐变，渐变就只显在描边那一圈，不借助 border-image 也能做出渐变边框。它和 text 是 background-clip 的两兄弟：一个把背景灌进字形，一个把背景灌进描边。

6.1 · 基本配方：transparent 描边 + 渐变背景

四件套缺一不可：border-style + border-width 划出描边区、border-color: transparent 让描边本身不上色、background 给一张渐变当料、background-clip: border-area 把渐变裁进描边区。中间的 padding / content 区被裁掉，露出底，所以这是一圈镂空的渐变边框。盒子内部想要填充色，得用不被裁的另一层或子元素——border-area 只管描边那一圈。

为什么是 transparent 而非「不写颜色」？border-area 的取舍是「看 width / style、不看 color 的透明度」：只要 border-style 不是 none、border-width 不为 0，这一圈就算被描边占用，背景便填进来——哪怕 border-color 是全透明。把颜色设成 transparent 只是为了不让描边自身的颜色盖在渐变上；若给个实色，描边会画在渐变之上把它挡住。

6.2 · border-style 决定笔形：渐变跟着描边走

这正是 border-area 区别于 border-box 的地方：border-box 把背景铺满整个边框矩形（连同 padding / content），而 border-area 只填描边真正落笔的像素——dashed 的空档、dotted 的间隙、double 中间那条缝，都不会显出渐变。于是同一段渐变能直接画成虚线框、点线框、双线框，笔形交给 border-style，无需 border-image 切片。

6.3 · 必配 background-origin: border-box

常见错误：忘了写 background-origin: border-box。background-origin 默认是 padding-box——渐变的「画布」从 padding 盒起算，被 border-width 向内缩了一圈，而我们要填的描边区却在这块画布之外。落在画布外的部分只能取渐变端点色的延伸（0% / 100% 钳死），于是四条边显出突兀的纯色、转角对不上。把 origin 改成 border-box，渐变画布撑到边框外缘，描边区整个落在渐变范围内，颜色才连续。用 border-area 几乎总要同时写 background-origin: border-box。

6.4 · 简写一行：border-box border-area 打包进 background

background 简写末尾可以连写两个 <box> 值：第一个赋给 background-origin、第二个赋给 background-clip（只写一个则两者同取该值）。于是 background: linear-gradient(…) border-box border-area 一行就把前一节必配的 background-origin: border-box与 background-clip: border-area 一起设好——这也是为什么必须写两个 box:border-area 不是合法的 background-origin 值，只写它一个会让声明作废，得靠前面的 border-box 覆盖 origin。边色 #0000 是 transparent 的四位 hex 缩写(#RGBA,alpha=0)。

注意这点和灌进字形那节的 text 恰好相反：text 不是 <box> 文法里的值，写进 background 简写会让整条声明作废（那节实测已验证），只能拆成独立 background-clip: text；而 border-area 属于简写认得的 box 关键字，可以直接连写进简写——两个新值一个能简写、一个不能，别记混。

和老办法比：border-image 要把图切成九宫格再拼角与边，渐变这种连续图也得迁就切片规则；早年的「双层盒 + padding」「mask 叠加」则要么多一个元素、要么手写遮罩。border-area 把渐变当一整块填进描边，还天然兼容 border-radius 圆角与单边 / 不等宽边框（border-block-width 之类）。更进一步：同一渐变声明两次、配 background-clip: border-area, text 并 color: transparent，就能让边框与文字同时吃这段渐变。

7 · radial-gradient 几何：渐变圆到底长多大？

linear-gradient 只要一个角度，radial-gradient 却要回答三个问题：渐变圆是正圆还是椭圆(shape)、圆心在哪(at)、以及最关键的——渐变到哪里算「画到头」(size)。size 那四个关键字 closest-side / closest-corner / farthest-side / farthest-corner 最容易记混：它们用圆心到盒子「边」或「角」的距离来定终点半径。本节先摆出完整语法（骨架 + 取值速查），再把渐变圆的边界画出来——拖圆心、切关键字看圆/椭圆怎么贴住最近的边、最远的角，最后用它画圆点 / 圆环。

7.1 · 语法全貌：四段拼出一条 radial-gradient

上表里 size 有两种写法：四个关键字（其几何见「size 关键字」一节），或直接给尺寸。下面拖滑块体验显式尺寸——注意 circle 只吃一个长度、不能用百分比；ellipse 要两个值且能用百分比。

position 不止 at X Y:at 后面可写关键字(at top left / at center)，也可写数值(at 25px 25px / at 25% 50%)；只给一个值时第二维默认 center。另有两点易忘：radial-gradient 的色标曾要求至少两个，现已放宽到一个（单色标 = 纯色）;circle 的显式尺寸只能是 <length>（像素等）、不能用百分比——想用百分比尺寸只能走 ellipse。

7.2 · size 关键字：终点半径由谁决定

四个关键字 = 两两组合：近 / 远 × 边 / 角。side 量到四条边里最近 / 最远的那条，corner 量到四个角里最近 / 最远的那个——角永远比边远，所以同侧的 corner 半径 ≥ side。farthest-corner 是默认值（省略 size 时就是它），保证圆 / 椭圆能盖住整个盒子。circle 各方向取同一半径（一个数）;ellipse 把水平、垂直距离分开算，于是贴合矩形盒子的长宽比。把圆心拖到正中，四个关键字的差别最直观：居中时 closest-side < farthest-side、closest-corner < farthest-corner。

7.3 · 硬边界 + repeating：用 radial 画圆点 / 圆环 / 同心环

radial 的色标位置可以用 px 也可以用 %，但参照系不同：at X% Y% 里的百分比参照盒子尺寸（50% = 盒子正中）；而色标 crimson 30% 里的百分比参照渐变半径（从圆心到 size 终点），不是盒子。用 px 的色标（如 0 60px）则直接是离圆心的距离——想画精确的圆点 / 圆环，用 px 最稳。和前面几节一样，相邻两个色标给同一个位置就是硬边界：实心圆点的圆周、圆环的内外缘都靠它切出利落的边。

8 · linear-gradient 方向：角度与 to 角

linear-gradient 的色标语法和 radial 一样，真正属于它自己的只有一件事：方向。方向有两种写法——给一个角度 <angle>(90deg)，或用 to <side-or-corner> 指向某条边 / 某个角(to right / to top left)。其中最反直觉的是：to top right 并不等于 45deg——指向「角」时渐变线会随盒子长宽比旋转，让那条对角线两端的角点颜色精确一致(magic corner)。本节先摆全语法，再把这条几何讲透。

8.1 · 语法全貌：方向 + 色标

下面切换两种方向写法——拖角度，或点 to 的边 / 角，看渐变方向与生成的 CSS。

方向写在色标前面，后跟一个逗号。省略方向时默认 to bottom（从上往下，等于 180deg）。角度从 12 点钟方向起、顺时针增加，这点和数学里的逆时针不同——也和老式 -webkit- 前缀语法的角度基准相反，迁移时需留意。四条 to-边 等价固定角度：to top=0deg、to right=90deg、to bottom=180deg、to left=270deg。

8.2 · to 角 ≠ 45deg：渐变线怎么摆(magic corner)

上面的盒子宽 ≠ 高。在 50% 处硬切出的那条分界线垂直于渐变方向，所以看它的斜率就知道渐变线朝哪。固定角度(45deg / 135deg)的分界线斜率恒定不变，非正方盒子下不会正好穿过角；而 to top right 让渐变线旋转到：分界线恰好平行于另外两个角的连线(top-left ↔ bottom-right)，于是 top-right 角是 100% 色、bottom-left 角是 0% 色，两个对角颜色精确到头——这就是 magic corner，把盒子拉成正方时它才退化回 45deg。