实战技巧
渐变设计指南：从 CSS 语法到消除灰带
渐变是最廉价的高级感来源，也是最容易翻车的技术——脏灰中段、荧光过渡、停靠点打架。本指南覆盖 linear/radial/conic 三语法、停靠点策略、OKLCH 无灰带插值，以及 47 组精选渐变的实战参考。
6 分钟阅读5 章节2,044 字
示例色板
要点速览
- sRGB 直插渐变的中段发灰是数学必然（RGB 空间里红到绿的直线穿过暗区）——OKLCH 插值是根治方案
- 两个停靠点是起点不是上限：3-5 个停靠点能表达光照、材质与深度，中间点明度宜呈钟形分布
- radial 适合光感与聚焦（头像光环、按钮高光），linear 适合氛围与过渡（hero 背景），conic 适合环形进度与装饰
- 文字压渐变必查对比度：渐变上最低对比点决定可读性，不是平均值
三种语法：linear / radial / conic 的分工
linear-gradient(角度, 色1, 色2…) 沿直线过渡，是 hero 背景、卡片氛围、图表热力的主力——角度决定情绪方向：自上而下（180deg）自然如天光，对角线（135deg）有速度感，水平过渡适合分段叙事。
radial-gradient(形状 at 位置, 色…) 从中心向外辐射，天生适合「光」：按钮顶部高光（radial at top）、头像背后的光环、聚光灯效果。conic-gradient(起始角, 色…) 绕圆周过渡，是饼图、环形进度条、色轮的语法本体——站内 /tools/color-wheel 就是用 conic 渲染的。
灰带问题：为什么红绿渐变中间发灰
在 sRGB 空间里对两个色做线性插值，中段是两个 RGB 坐标的算术平均——红（255,0,0）到绿（0,255,0）的中点是（127,127,0）暗土黄，视觉上就是那条著名的「脏带」。这不是审美问题而是色彩空间数学：RGB 直线不经过高明度区域。
根治方案是感知均匀空间的插值：CSS 的 `in oklch` 插值提示（Chrome 111+ / Safari 16.2+ / Firefox 128+）——`linear-gradient(in oklch, #f3722c, #009e73)` 的中段保持明度与饱和度的连续性，无灰带。同源渐变的 sRGB 与 OKLCH 双版本对照可在本站渐变画廊（/gradients）逐条查看。
停靠点策略：两个以上的世界
双停靠点适合纯氛围，但表达力有限。3-5 个停靠点能表达「光照逻辑」：中段点明度高于两端（钟形分布）= 高光材质；两端高中间低 = 双光源或暮色；单侧递减 = 天光渐弱。位置参数（如 #f9c74f 45%）比均匀分布更有叙事感——关键停靠点放在 30-70% 之间的黄金区。
停靠点之间的色相跨度控制在 90° 内最稳（类似色渐变），跨越大色相（橙→青）时务必启用 OKLCH 插值或手动加中间锚点锚定明度。站内 /tools/gradient 支持 2-6 停靠点自由增删、逐点位置滑块与实时预览，选好后一键复制 CSS。
渐变上的文字：可读性优先
渐变背景上的文字对比度按「最低对比点」评估而非平均——hero 渐变里文字覆盖的区间内，最浅处的文字/底对比必须 ≥ 4.5:1（正文）或 ≥ 3:1（大标题）。常见做法：文字区下方渐变刻意加深（局部停靠点压明度），或给文字加局部 scrim（半透明深色遮罩层）。
装饰性渐变（无文字覆盖）自由度高，但注意大面积高饱和渐变的视觉疲劳——低饱和跨明度渐变（如 0F4C5C→8AC6D1）的耐受度远高于荧光渐变，适合长停留界面；高饱和渐变留给首屏 hook 与短时注意力场景。
参考库与导出
从模仿开始是正道：本站渐变画廊（/gradients）精选 47 条编辑性策展渐变，按日落/海洋/森林/糖果/暮色/莫兰迪六组组织，每条提供 sRGB 与 OKLCH 双 CSS 版本、停靠点逐色深链与完整值表——单条详情页可直接复制到项目。
构建自己的渐变资产时，命名与归档同样重要：按「情绪 + 场景」命名（如 sunset-hero、ocean-card）而非色值命名，便于设计系统复用。/tools/gradient 生成的方案支持 hash 分享链接，团队协作时直接传链接代替截图。
文中颜色
常见问题
in oklch 浏览器兼容性不够怎么办？
渐进增强：默认写 sRGB 版本（全兼容），@supports (color: oklch(0% 0 0)) 里覆盖 OKLCH 版本——现代浏览器自动享受无灰带，老浏览器拿到可接受的降级。本站渐变画廊每条都是这个双版本结构，可直接抄。
渐变里的颜色怎么保证和品牌色协调？
渐变成员色与品牌色共享色温与饱和度区间：把品牌主色及其类似色（±30°）做明度序列，是最不容易出错的渐变族；跨色相渐变让品牌色作为一端锚点。生成后在 /tools/gradient 里逐点微调并实时预览，比先写 CSS 再调快得多。
radial 渐变在移动端性能有问题吗？
纯 CSS 渐变由合成器渲染，性能远优于位图与滤镜，移动端可放心使用。真正的性能坑是「大面积渐变 + 频繁重绘」（如滚动驱动的渐变动画）——动画时优先用 transform/opacity，避免逐帧改渐变参数。静态渐变背景挂 body 或 hero 上没有可测量的性能代价。