CSS 渐变完全指南:线性、径向、多色色标怎么调才好看

纯色背景铺一片,页面会显得很平。换成一条调得舒服的渐变,Hero 区立刻有了氛围。但很多人调渐变靠手感反复试,改一个角度要刷新好几遍。这篇把渐变的几个核心概念拆开讲清楚,你以后调的时候心里有数。

线性渐变和径向渐变,先分清

线性渐变(linear-gradient)是从一端褪到另一端的方向性过渡,适合 Hero 背景、按钮底色、分隔线。径向渐变(radial-gradient)从一个点向外扩散,像聚光灯,适合辉光光晕、卡片角落高光、伪 3D 球体。

按 MDN 的定义,linear-gradient() 沿一条直线生成颜色过渡,这条直线的方向由角度或关键词决定;radial-gradient() 则从一个圆心向外扩散,可以是圆形(circle)或椭圆(ellipse),并能指定锚点位置。一句话:想做褪色用 linear,想做光源用 radial。

角度和色标位置,决定渐变的走向

线性渐变的角度从 0deg(自下而上)到 360deg 旋转,90deg 是从左到右,135deg 是从左上到右下的对角线,这是落地页里出现频率最高的一个角度。

色标(color stop)的位置用 0% 到 100% 表示,它控制每个颜色在过渡轴上落在哪。不写位置时,浏览器把色标均匀铺开;写了位置,你就能让某个颜色提前出现或推后,做出"前段慢、后段快"这种不均匀的节奏。两个相邻色标位置写成同一个百分比,过渡会变成硬边,这也是做色块拼接的技巧。

多色渐变:几个色标算合适

2 个色标是最经典的双色过渡,干净、可预测、易读。3 到 4 个色标能做极光、日落那种优雅的多色背景,是落地页的黄金区间。5 个以上色标会开始像油膜效果,做艺术化设计可以,但放在正文背后会因为色相变化太频繁影响阅读。

我自己给一个 SaaS 落地页调 Hero 时,试过堆 6 个色标想做"高级感",结果在文字后面读起来非常累,最后砍回 3 色才舒服。经验是:文字背后的渐变最多 3 色,相邻色标色相差控制在 30° 以内。

生成可直接粘贴的 CSS

调好之后,你需要的是一段能直接用的 background: 值。用 CSS 渐变生成器 拖角度、加色标、实时预览,输出区给出标准 CSS,一键复制即可。下面是一个 135° 的 3 色线性渐变,实际生成的代码长这样:

.hero {
  background: linear-gradient(
    135deg,
    #4f46e5 0%,
    #8b5cf6 50%,
    #d946ef 100%
  );
}

这段值是标准 CSS,粘进样式表、styled-component 模板字符串,或者 React 的 style={{ background: '...' }} 都能跑。Tailwind 用户可以用 bg-[linear-gradient(...)] 这种 arbitrary value 写法。如果你想精确拿到某个颜色的 HEX、RGB、HSL 互转,配合 颜色转换器 一起用会更顺。

背景渐变和文字渐变的区别

背景渐变直接写 background 就生效。文字渐变要多两步:把渐变设到 background,再用 background-clip: text 把它裁切到文字形状,并把文字本身设成透明:

.title {
  background: linear-gradient(90deg, #06b6d4, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

文字渐变更挑色:对比度太低会糊,色标太多会让笔画里颜色乱跳。标题用双色、控制在相近色相内,读起来才稳。

为什么会有色带,怎么消

渐变中间出现一道明显的条带,叫 gradient banding,是 GPU 加 8 位色深的真实渲染问题,不是工具 bug。两个办法:一是挑色相和明度更接近的两个颜色,黑到白比深灰到浅灰更容易出色带;二是在中间加一个过渡色标。对要求极高的 Hero 背景,可以把图导出成 PNG,在 Photoshop 或 Figma 里加 1% 到 2% 杂色,用加噪后的图替代纯 CSS 渐变。

渐变调得好不好,差别就在这几个细节:角度对不对、色标够不够克制、有没有处理色带。把这几点放在心上,你下次调渐变会快很多。

---

Made by Toolora · Updated 2026-06-13