渐变好看与难看之间隔着一整套决策：类型、色标、角度、插值空间，还有最容易被忽略的——渐变上的文字对比度。本文按「选型 → 调参 → 品牌化 → 无障碍」的顺序，把一条渐变从想法带到上线。
先选类型：线性、径向还是圆锥
CSS 三种渐变各管一个方向感，选错类型怎么调都别扭：
- 线性渐变（linear-gradient）：沿一个方向过渡。横幅、Hero 背景、按钮、卡片边框、分区过渡，凡是「有方向感」的设计都用它——也是默认首选；
- 径向渐变（radial-gradient）：从中心点向外扩散。聚光灯效果、光晕、头像底衬、按钮内高光、「页面四角压暗」的氛围层；
- 圆锥渐变（conic-gradient）：绕中心点旋转过渡。饼图、色轮、装饰性扇形和加载指示器。
拿不准就用 CSS 渐变生成器 并排试三种类型——实时预览下哪个对味一目了然，调好直接复制 CSS。
色标与角度：渐变的核心参数
色标数量：从两个开始
两个色标是默认答案，最干净也最难失控。三个色标用于营造高光感（深-亮-深）或承接三种品牌色；超过三个极易变成彩虹墙。色标位置不必对半开——把主色标移到 30%/70% 附近，渐变会更有节奏。中间发灰的问题见下一节和 FAQ。
角度：固定比「每次换着来」更专业
CSS 角度顺时针计算：0deg 向上、90deg 向右、180deg 向下。常用安全角度：
| 角度 | 方向 | 适用 |
|---|
| 135deg | 左上 → 右下 | 默认首选，最自然 |
| 90deg | 左 → 右 | 窄按钮、横向条带 |
| 180deg | 上 → 下 | 大面积背景、页头 |
同一产品固定一两个角度，视觉上会呈现「系统感」；每个模块换一个角度，看起来就是随手调的。
插值：为什么中间会发灰
两端色相隔得远（青 → 橙），浏览器在 RGB 空间直线插值，路径正好穿过低饱和区，中段就发灰。解法按优先级：换同色系深浅对（最稳）；跨色相时在中间加过渡色标手动指定中段色；或改用现代语法 in oklch 插值，让路径绕开灰区。选色配色思路可参考 配色原理指南 的色轮与色相距离。
品牌渐变的三步落地
- 定两端色：从品牌主色出发选第二个颜色——同色相拉深浅是安全牌；跨色相时先在生成器里预览中段是否发灰；
- 定角度系统：全局固定一个主角度（如 135deg），按钮等窄元素允许一个副角度。写进设计规范，而不是每个页面现场发挥；
- 固化成令牌：把最终 CSS 存成设计令牌（如
--brand-grad），全站引用同一值。改渐变只改一处。
在 CSS 渐变生成器 里调好后直接复制 CSS，贴进令牌文件即可。上线前务必做下一节的对比度校验。
渐变上的文字：按最差点校验对比度
纯色背景上文字对比度只有一个数，渐变背景上每个点的对比度都不同——必须按最差的点校验，也就是文字颜色对渐变较亮一端的组合。WCAG 的达标线：正文至少 4.5:1，18pt 以上大字至少 3:1。
实测流程：
- 从渐变里取出两端色值（生成器里直接能看到）；
- 用 对比度检查器 分别测文字色对两端色的比值，取较差的那个；
- 不达标就三选一：压深渐变较亮端、文字下加暗色遮罩层、给文字加投影（最后手段）；
- 暗色模式换了一组渐变令牌，就重新测一遍——背景变了，之前达标的不代表还达标。
对比度的达标线、实测细节与常见误区，在 无障碍对比度指南 里有完整展开；渐变场景记住一句话：校验最差点，而不是平均值。
常见问题
Q：线性渐变和径向渐变分别适合什么场景？
A：线性渐变沿一个方向过渡，适合横幅、按钮、分区背景和封面图这类「有方向感」的设计；径向渐变从一个中心点向外扩散，适合聚光灯、光晕、头像背景和按钮高光；圆锥渐变适合饼图和装饰性扇形。拿不准时先用线性 135 度（左上到右下）试——它是视觉上最自然、最不容易出错的默认选择。
Q：渐变角度怎么选？
A：CSS 里 0deg 指向上、90deg 指向右、180deg 指向下，角度按顺时针计算。常用的安全角度：135deg（左上到右下）最自然；90deg（水平）适合窄按钮；180deg（垂直）适合大面积背景。同一产品里固定一两个角度反复使用，比每处换个角度更显专业——角度本身就是品牌渐变系统的一部分。
Q：为什么我的渐变中间发灰、发脏？
A：两个原因：一是两端色相相隔太远（比如青色到橙色），插值路径穿过低饱和区，中段自然发灰；二是互补色在 RGB 空间直接插值。解决办法：缩短两端色相距离，改用同色系深浅渐变；必须跨色相时在中间加一个过渡色标，手动指定中段颜色；或使用支持 OKLCH 插值的现代语法（interpolation color space）。
Q：渐变上的文字对比度怎么保证？
A：WCAG 要求正文对比度至少 4.5:1、大字号 3:1，而渐变上每个点的颜色都不一样——必须按最差的那一点校验，通常是文字颜色对渐变较亮的一端。实测方法：取出渐变两端色值，分别与文字颜色检查对比度，取不达标就压深渐变、加暗色遮罩层，或给文字加投影。最稳的兜底是纯白文字配足够深的渐变。
Q：品牌渐变应该用几个色标？
A：两个色标是默认答案——最干净、最不容易失控。三个色标用于需要「高光感」的场景（深-亮-深）。超过三个色标很容易变成彩虹墙，除非品牌本身就是多色系。确定色标后把它固化成设计令牌：一组品牌色 + 固定角度 + 固定色标位置，全站引用同一套值，而不是每个页面重新配。
Q：暗色模式下渐变要注意什么？
A：亮色模式下舒服的浅色渐变，放到深色背景上常显得刺眼或像发光的错误。做法是为暗色模式单独定义一组渐变令牌：降低整体亮度、拉开端点间的明度跨度，让渐变融入深色底而不是浮在上面。同时重新校验暗色模式下文字与渐变的对比度——背景变了，之前达标的组合可能不再达标。
免费在线调 CSS 渐变
线性 / 径向 / 圆锥 · 色标实时预览 · 一键复制 CSS · 纯浏览器本地调试
打开 CSS 渐变生成器 →
Pick the Type: Linear, Radial, or Conic
Each CSS gradient type handles a different sense of direction — pick the wrong one and no amount of tuning feels right:
- Linear gradients transition along one direction. Banners, hero backgrounds, buttons, card borders, section transitions — anything "directional". The default choice;
- Radial gradients spread outward from a center point. Spotlights, glows, avatar backdrops, inner button highlights, vignette layers;
- Conic gradients rotate around a center. Pie charts, color wheels, decorative sectors, spinners.
When unsure, preview all three side by side in the CSS Gradient Generator — with live rendering, the right one is obvious, and the CSS copies straight out.
Stops and Angles: The Core Parameters
Stop count: start with two
Two stops is the default answer — cleanest and hardest to break. Three stops build a highlight (dark-light-dark) or carry three brand colors; beyond three, you're one step from a rainbow wall. Stop positions don't have to be even — moving the main stop to around 30%/70% gives the gradient rhythm. (For the muddy-middle problem, see below and the FAQ.)
Angles: fixing one beats improvising every time
CSS angles run clockwise: 0deg points up, 90deg right, 180deg down. Safe go-to angles:
| Angle | Direction | Best for |
|---|
| 135deg | top-left → bottom-right | Default; most natural |
| 90deg | left → right | Narrow buttons, horizontal bands |
| 180deg | top → bottom | Large backgrounds, page headers |
Fixing one or two angles across a product creates a sense of system; a different angle per module reads as improvised.
Interpolation: why the middle turns gray
When the two ends are far apart in hue (cyan → orange), the browser interpolates in a straight line through RGB — the path crosses a low-saturation zone and the middle muddies. Fixes, in order of preference: switch to a same-hue light/dark pair (safest); add a middle transition stop with a hand-picked color; or interpolate in a modern space with in oklch to route around the gray. For hue distance and color-wheel thinking, see the Color Theory Guide.
Landing a Brand Gradient in Three Steps
- Fix the two ends: start from the brand color and pick the second — a same-hue light/dark pair is the safe bet; if crossing hues, preview the middle in the generator first;
- Fix the angle system: one global primary angle (say 135deg), with at most one secondary for narrow elements like buttons. Write it into the design spec — don't improvise per page;
- Tokenize it: store the final CSS as a design token (e.g.
--brand-grad) and reference that everywhere. Changing the gradient then means changing one line.
Tune it in the CSS Gradient Generator, copy the CSS, and paste it into your token file. Before shipping, run the accessibility check below.
Text on Gradients: Check the Worst Point
On a solid background, text contrast is a single number; on a gradient, every point has its own ratio — so you must validate the worst point, typically the text color against the lighter end of the gradient. WCAG thresholds: at least 4.5:1 for body text, 3:1 for large text (18pt+).
Practical workflow:
- Grab the color values at both gradient ends (the generator shows them directly);
- Run each against the text color in the Contrast Checker and keep the worse ratio;
- If it fails, pick one: darken the lighter end, add a dark overlay behind the text, or add a text shadow (last resort);
- If dark mode swaps in a different gradient token, re-test — a passing combination doesn't survive a background change.
The thresholds, testing details, and common pitfalls are covered fully in the Accessibility Contrast Guide; for gradients, remember one sentence: validate the worst point, not the average.
FAQ
Q: When do I use linear vs radial gradients?
A: Linear gradients transition along one direction — banners, buttons, section backgrounds, covers, anything directional. Radial gradients spread from a center point — spotlights, glows, avatar backdrops, button highlights. Conic gradients suit pie charts and decorative sectors. When unsure, try linear at 135deg (top-left to bottom-right) first — the most natural, hardest-to-ruin default.
Q: How do I choose the gradient angle?
A: In CSS, 0deg points up, 90deg right, 180deg down — angles are clockwise. Safe go-tos: 135deg (top-left to bottom-right) is the most natural; 90deg (horizontal) suits narrow buttons; 180deg (vertical) suits large backgrounds. Fixing one or two angles across a product reads as more professional than changing it everywhere — the angle itself is part of your brand gradient system.
Q: Why does my gradient turn gray or muddy in the middle?
A: Two causes: the end hues are too far apart (cyan to orange, say), so the interpolation path crosses a low-saturation zone and the middle grays out; or complementary colors are interpolated directly in RGB. Fixes: shorten the hue distance and use a same-hue light/dark pair; add a middle transition stop with a hand-picked color when you must cross hues; or use modern OKLCH interpolation (interpolation color space).
Q: How do I guarantee text contrast on a gradient?
A: WCAG requires at least 4.5:1 for body text and 3:1 for large text — but on a gradient every point differs, so validate the worst point, usually the text color against the gradient's lighter end. Method: extract both end colors and check each against the text color; if either fails, darken the gradient, add a dark overlay, or add a text shadow. The safest fallback is pure white text on a sufficiently dark gradient.
Q: How many color stops should a brand gradient use?
A: Two is the default answer — cleanest and hardest to lose control of. Three stops serve highlight effects (dark-light-dark). Beyond three easily becomes a rainbow wall, unless your brand is genuinely multi-hue. Once decided, tokenize it: one set of brand colors + a fixed angle + fixed stop positions, referenced site-wide instead of re-mixed per page.
Q: What should I watch out for in dark mode?
A: Light pastel gradients that look great in light mode often glare on dark backgrounds or read as a glow bug. Define a separate gradient token set for dark mode: lower overall brightness, widen the lightness span between ends so the gradient melts into the dark ground instead of floating on it. And re-validate text-on-gradient contrast — the background changed, so a previously passing pair may now fail.
Tune CSS Gradients — Free Online
Linear / radial / conic · Live stop preview · Copy CSS in one click · Runs in your browser
Open CSS Gradient Generator →