CSS 渐变进阶：linear-gradient 的角度、色标位置与 5 个常用视觉效果Advanced CSS Gradients: Angles, Colour-Stop Positioning and 5 Useful Visual Effects

角度与方向：to right 与 90deg 的区别Angles and direction: the difference between to right and 90deg

很多人以为 `to right` 和 `90deg` 是一回事，其实它们的基准不同。CSS 渐变的角度遵循"标准数学方向"：0deg 指向正上方（12 点钟方向），角度顺时针增加。所以 `90deg` 指向右方，`180deg` 指向下，`270deg` 指向左。而 `to right` 是关键字写法，确实等价于 `90deg`，但 `to bottom right` 这种对角线关键字的角度不是精确的 45deg——它指向元素的右下角，当元素不是正方形时，实际角度会随宽高比变化。Many people assume `to right` and `90deg` are the same thing, but their baselines differ. CSS gradient angles follow "standard mathematical direction": 0deg points straight up (12 o'clock), and angles increase clockwise. So `90deg` points right, `180deg` down, `270deg` left. `to right` as a keyword is indeed equivalent to `90deg`, but diagonal keywords like `to bottom right` are not exactly 45deg — they point to the element's bottom-right corner, and when the element is not square, the actual angle varies with the aspect ratio.

我踩过的一个坑：在一个宽 800px、高 200px 的横幅上用 `linear-gradient(45deg, red, blue)`，本以为是 45 度斜线，结果因为元素是扁的，渐变线看起来比 45 度陡得多。后来才理解：渐变角度是相对于元素坐标系的，45deg 在扁元素上画出来的线确实更陡。如果想要"视觉上 45 度"的斜线，应该用 `to bottom right` 让它对齐角点，或者接受数学角度的真实含义。A pitfall I hit: on a banner 800px wide and 200px tall, I used `linear-gradient(45deg, red, blue)` expecting a 45-degree diagonal, but because the element is wide and short, the gradient line looked much steeper than 45 degrees. I later understood: gradient angles are relative to the element's coordinate system, so 45deg on a wide element does produce a steeper line. If you want a "visually 45-degree" diagonal, use `to bottom right` to align with the corner, or accept what the mathematical angle really means.

还有一个细节：`linear-gradient` 的渐变线会延伸到元素之外。渐变线的起点和终点是通过元素中心、沿指定角度画的一条线，与元素边界框的交点。这意味着颜色在到达边界时可能还没"走完"，所以你经常看到渐变在边缘处被截断——这是正常的，不是 bug。One more detail: the gradient line extends beyond the element. The start and end points are where a line through the element's centre, at the specified angle, intersects the element's bounding box. This means colours may not have "finished" by the time they reach the edge, so you often see gradients clipped at the boundary — that's normal, not a bug.

色标位置与硬边Colour-stop positions and hard stops

色标（colour stop）是渐变的核心。每个色标由颜色和位置组成，位置可以是百分比或长度。`linear-gradient(red 0%, blue 100%)` 里，红色从 0% 开始，蓝色在 100% 结束，中间平滑过渡。如果省略位置，浏览器会自动均匀分布：第一个色标默认 0%，最后一个默认 100%，中间的等分。Colour stops are the heart of a gradient. Each stop is a colour plus a position, which can be a percentage or length. In `linear-gradient(red 0%, blue 100%)`, red starts at 0%, blue ends at 100%, with a smooth transition between. If you omit positions, the browser distributes them evenly: the first stop defaults to 0%, the last to 100%, and those in between split the difference.

最实用的技巧是"硬边"（hard stop）：两个相邻色标位置相同，就会产生锐利的分界线，没有过渡。`linear-gradient(red 50%, blue 50%)` 上半红下半蓝，边界是一条完美的直线。这个技巧可以用来做双色背景、分割线、斜切效果，比用两个 div 拼接更简洁。The most useful trick is the "hard stop": two adjacent stops at the same position produce a sharp boundary with no transition. `linear-gradient(red 50%, blue 50%)` gives top half red, bottom half blue, with a perfectly straight dividing line. This technique is great for two-tone backgrounds, dividers and diagonal cuts — cleaner than splicing two divs.

如果想要"先硬边再过渡"，可以写多个色标：`linear-gradient(red 30%, blue 30%, blue 70%, green 70%)`——前 30% 纯红，30% 到 70% 纯蓝，70% 之后纯绿。这种"色块拼接"在做信息图背景、定价卡片分层时特别好用。For a "hard stop then transition," use multiple stops: `linear-gradient(red 30%, blue 30%, blue 70%, green 70%)` — pure red for the first 30%, pure blue from 30% to 70%, pure green after. This "colour block splicing" is especially handy for infographic backgrounds and tiered pricing cards.

还有一个容易忽略的点：色标位置可以是负数或大于 100%。`linear-gradient(red -50%, blue 150%)` 会让渐变范围变大，元素内只显示中间一段，颜色变化更平缓。我在做"几乎纯色但带微妙渐变"的背景时常用这个技巧，比直接用纯色更有质感。One easily missed point: stop positions can be negative or greater than 100%. `linear-gradient(red -50%, blue 150%)` widens the gradient range so the element shows only the middle segment, making the colour change more gradual. I use this for "almost solid but with a subtle gradient" backgrounds — more texture than a flat colour.

5 个常用视觉效果5 useful visual effects

下面五个效果是我在项目里反复用到的，代码可以直接复制。Here are five effects I use repeatedly in projects — code is ready to copy.

**1. 玻璃拟态（Glassmorphism）背景**：用半透明渐变叠加模糊，做出毛玻璃效果。**1. Glassmorphism background**: semi-transparent gradient plus blur for a frosted-glass effect.

关键点是渐变用 rgba 而非纯色，这样底层内容能透过来。`backdrop-filter` 在 Safari 里需要 `-webkit-` 前缀。The key is using rgba rather than solid colours so underlying content shows through. `backdrop-filter` needs the `-webkit-` prefix in Safari.

**2. 网格纹理背景**：用多层渐变叠加画网格线，不需要图片。**2. Grid texture background**: draw grid lines with stacked gradients, no image needed.

两层渐变分别画横线和竖线，`background-size` 控制网格密度。这是做技术博客代码区背景的常用手法。Two layers draw horizontal and vertical lines; `background-size` controls grid density. A common technique for code-area backgrounds in technical blogs.

**3. 渐变文字**：文字本身用渐变填充，适合标题。**3. Gradient text**: fill text itself with a gradient, great for headings.

`background-clip: text` 把渐变裁剪到文字形状，`color: transparent` 让文字本身透明以显示渐变。不支持的浏览器会显示透明文字，所以最好加 `@supports not` 降级。`background-clip: text` clips the gradient to the text shape; `color: transparent` makes the text itself transparent to reveal the gradient. Unsupported browsers show transparent text, so add an `@supports not` fallback.

**4. 斜切分割区**：用硬边加角度做对角分割。**4. Diagonal split section**: hard stop plus angle for a diagonal divide.

两个色标都在 50%，形成硬边；115deg 让分割线不是正对角，视觉上更有设计感。Both stops at 50% create a hard edge; 115deg makes the split off-diagonal for a more designed look.

**5. 光晕效果**：用径向渐变（radial-gradient）做柔和光晕，叠加在线性渐变上。**5. Glow effect**: radial-gradient for a soft glow, stacked on a linear gradient.

径向渐变画一个柔和的光斑，底层线性渐变提供深色背景。多层渐变用逗号分隔，先写的在上层。这是做深色 landing page 首屏的标准手法。The radial gradient draws a soft light spot; the underlying linear gradient provides a dark background. Multiple gradients are comma-separated, with the first written on top. A standard technique for dark landing-page hero sections.

性能与兼容性Performance and compatibility

渐变是纯 CSS 绘制，不发网络请求，通常比图片背景性能好。但有两个场景需要注意。第一是超大元素上的复杂多层渐变：如果一个全屏背景叠加了 5 层以上渐变，且元素在滚动中不断重绘，低端手机可能掉帧。解决办法是给背景元素加 `will-change: background` 提示浏览器分层，或者把渐变渲染成一张静态图缓存。Gradients are pure CSS — no network requests — and usually outperform image backgrounds. But two scenarios need attention. First, complex multi-layer gradients on very large elements: if a full-screen background stacks 5-plus gradients and the element constantly repaints during scroll, low-end phones may drop frames. Fixes include adding `will-change: background` to hint the browser to layer it, or rendering the gradient as a cached static image.

第二是 `repeating-linear-gradient` 的大量重复：当重复周期很小（如 2px）且元素很大时，浏览器需要绘制成千上万条线，合成开销显著。我在一个项目里用 `repeating-linear-gradient` 做了 1px 条纹背景，在低端 Android 上滚动帧率从 60 掉到 35，改成 4px 条纹后恢复正常。Second, heavy repetition with `repeating-linear-gradient`: when the repeat period is tiny (e.g. 2px) and the element is large, the browser draws thousands of lines and compositing cost spikes. On one project I used `repeating-linear-gradient` for a 1px stripe background; scroll frame rate on low-end Android dropped from 60 to 35, and recovered after switching to 4px stripes.

兼容性方面，`linear-gradient` 和 `radial-gradient` 在所有现代浏览器（Chrome、Firefox、Safari、Edge）都完全支持，不需要前缀。`conic-gradient`（圆锥渐变）在 Safari 12.1 之前不支持，如果需要做色轮或饼图，要考虑降级。`background-clip: text` 需要 `-webkit-` 前缀，且在 Firefox 上从 49 版本才支持。On compatibility, `linear-gradient` and `radial-gradient` are fully supported in all modern browsers (Chrome, Firefox, Safari, Edge) with no prefix needed. `conic-gradient` is unsupported in Safari before 12.1 — plan a fallback for colour wheels or pie charts. `background-clip: text` needs the `-webkit-` prefix and only works in Firefox from version 49 onward.

我的建议是：渐变优先用 CSS，只有当渐变极其复杂（如照片级的多层光影）或需要在极低端设备上保证流畅时，才回退到图片。用本站的 CSS 渐变生成器可以可视化调试角度和色标，比手写代码快得多。My advice: prefer CSS gradients, and only fall back to images when the gradient is extremely complex (photo-level multi-layer lighting) or when smoothness on very low-end devices is critical. Our CSS gradient generator lets you visually debug angles and colour stops — much faster than hand-writing code.