渐变生成器
交互式生成线性与径向渐变，适合网页和海报背景。
查看页面颜色知识
linear-gradient 和 radial-gradient 的区别
渐变不仅是“好不好看”的问题，更是版式焦点和视觉层级的问题。搞清 linear-gradient 和 radial-gradient 的区别，才能在网页里用得准确。
发布时间：2026-04-30 · 最近更新：2026-04-30 · 阅读时长：4 分钟
先看结论
如果你只想先抓重点，可以先看这几条。
- linear-gradient 更强调方向，radial-gradient 更强调焦点。
- 线性渐变适合横幅、按钮、卡片和整页分区；径向渐变更适合首屏氛围和视觉聚焦。
- 不管哪种渐变，都要同步控制停靠点、透明度和 background-size。
适合搭配使用的工具
读完概念后，直接回到这些工具页做实际转换和校对会更高效。
两种渐变的核心差异
`linear-gradient` 会沿一个方向从一端过渡到另一端，所以它最擅长处理横向、纵向、斜向这类明确方向的版式。网页头图、按钮、分区背景和标签高光，通常都更适合线性渐变。
`radial-gradient` 则是从某个中心点向四周扩散，所以它更适合制造焦点、光斑和氛围。首屏视觉中心、海报封面、产品主视觉背景，经常会用到径向渐变。
网页里怎么判断该用哪一种
如果你的页面重点是“方向”和“流动感”，比如横幅、按钮、标签、模块分隔，先考虑线性渐变会更稳。
如果你的页面重点是“中心聚焦”和“氛围扩散”，比如 Hero 背景、封面、亮点区和视觉焦点图，径向渐变往往更合适。
- 线性渐变：更适合结构性背景。
- 径向渐变：更适合情绪性和中心聚焦背景。
- 同一页面不要滥用多种强烈渐变，否则视觉会散。
停靠点、透明度和尺寸为什么同样重要
很多人觉得渐变不自然，不一定是颜色选错了，反而可能是停靠点放得太死、透明度过满，或者 background-size 太小导致过渡太急。
尤其是大面积 Hero 区，如果你只改颜色不改尺寸和透明度，结果常常会显得硬、花或者脏。真正成熟的渐变方案，需要颜色、stop、alpha 和 size 一起调。
相关工具
这些工具可以把上面的规则直接落到颜色转换、配色和检查流程里。
常见问题
把最常被问到的疑问集中补齐，方便用户和搜索引擎快速定位答案。
按钮更适合线性渐变还是径向渐变？
绝大多数按钮更适合线性渐变，因为它更容易沿水平方向或斜方向做出层次，不会破坏按钮本身的结构感。
Hero 背景一定要用径向渐变吗？
不一定。很多 Hero 依然适合线性渐变，特别是版式本身偏横向时。是否使用径向渐变，关键看你是不是需要一个明显的视觉聚焦点。
渐变为什么看起来会脏？
常见原因是颜色过多、饱和度太高、停靠点太挤，或者透明度和尺寸没有配合调整。先把颜色数量压到 2 到 3 个，再逐步调 stop 和 alpha，通常会稳很多。
继续阅读
如果你在搭完整颜色栏目，可以继续沿着概念、配色和可读性方向往下看。