想在设计稿反复修改时快速迭代渐变与阴影，核心做法是：把调色环节从静态图层搬到实时预览的渐变工具里，拖动色标即时看效果，调好后直接复制 CSS 代码落到项目里。这样每次微调不再需要反复截图、导出、发消息确认，沟通和试错成本都会明显下降。
为什么传统调色流程会拖慢迭代
用图形软件手动拉渐变时，每改一个参数都要重新导出、截图、发送、等待反馈。一轮沟通下来，真正花在调色上的时间可能只有几分钟，其余都消耗在导出与往返确认上。
实时渐变工具改变的是这个循环：色标、角度、透明度都在同一界面里，拖动即所见。你可以连续试十几组配色而不产生任何导出成本，把「试错」这件事变得足够便宜。
渐变工具里你需要认识的几个参数
色标
色标是渐变上的一个个颜色控制点。想加几个颜色就加几个，想调位置就拖动位置。色标越多，过渡层次越丰富，但也越容易显得杂乱。通常两到三个色标就能做出干净的过渡，需要更强的叙事感时再加。
角度
角度决定渐变的方向。倾斜角度会改变视觉重心，同一组颜色换个角度，观感可能完全不同。你可以先固定颜色，只调角度来对比效果。
透明度
在色标上叠加透明度变化，可以让渐变的一端自然淡出，适合做背景、遮罩和卡片阴影的过渡。
色标位置
两个色标之间的距离决定过渡的快慢。距离近，过渡急；距离远，过渡缓。想要「高级感」，通常需要让过渡更缓、更均匀。
分步操作：从零调出一组可用的渐变
- 打开渐变生成器，界面通常分为左侧色标、右侧预览、中间可拖动滑块三部分。
- 先随手拉两到三个颜色，观察预览。不要一上来就追求精确，先找感觉。
- 尝试一组冷到暖的过渡，例如从深色过渡到中间色再过渡到浅色，感受「从深到浅、从冷到暖」带来的叙事感。
- 再试一组纯黑白灰的渐变，并叠加透明度变化，对比它与彩色渐变在层次上的差异。
- 确定大致方向后，调整角度，让渐变方向与版式或元素朝向匹配。
- 微调色标的亮度和饱和度，把整体调亮或调暗，直到预览里达到你想要的情绪。
- 复制工具生成的 CSS 代码，直接放入代码中使用。
渐变不只是背景装饰
把渐变只当背景，是限制它价值的主要误区。渐变可以从深到浅、从冷到暖地过渡，本身带有叙事感，能让平面设计「活」起来。它可以承担的不只是背景：
- 网页背景的氛围铺底
- 按钮的默认态与交互态
- 卡片的阴影过渡
- 图表的视觉层次区分
当你把渐变当成设计的组成部分而不是装饰，调参的方向也会从「好不好看」转向「传达什么情绪」。
阴影调参的思路
阴影和渐变共用同一套逻辑：颜色、透明度、过渡范围。用渐变工具调阴影时，重点不在阴影本身多深，而在它与主体的过渡是否自然。让阴影的一端带透明度淡出，通常比一块均匀的深色更耐看。阴影的颜色也可以从主体色里取，而不是一律用黑。
把方案沉淀成可复用规范
调出一组满意的渐变后，把它整理成规范文档。下次遇到类似需求，直接复制，连调都不用调。这一步是把「一次调参」变成「长期效率」的关键。
常见问题
渐变生成器能替代图形软件吗？
不能完全替代。它解决的是配色与过渡的实时预览问题，复杂合成、图层效果仍需要图形软件完成。两者是分工关系。
色标加得越多越好吗？
不是。色标越多过渡层次越丰富，但也越容易显得杂乱。多数场景两到三个色标已经足够。
为什么我调出来的渐变总显得「差点意思」？
常见原因是过渡太急、角度与版式不匹配，或颜色之间缺少冷暖或明暗的层次关系。先放慢过渡、再调角度，最后微调亮度饱和度。
复制出来的 CSS 代码能直接用吗？
工具生成的是标准渐变代码，可以直接放入项目使用。落地后如果还要微调，建议回到工具里调好再复制，避免在代码里反复手改。
这套方法适合所有设计场景吗？
适合需要频繁试色、快速对比方向的场景。如果只是固定配色的简单元素，直接写死颜色反而更快。