CSS 渐变生成器，免费

关于 CSS 渐变

CSS 渐变让您在两种或更多颜色之间显示平滑的过渡，无需使用图片。它们由浏览器生成，因此在任何分辨率下都能完美缩放，也不会增加页面加载负担。渐变通过 background 属性结合 linear-gradient() 或 radial-gradient() 函数来定义。

CSS 渐变简史

CSS 渐变定义在 CSS Image Values and Replaced Content Module Level 3 中，由 W3C CSS 工作组维护，编辑包括 Tab Atkins Jr. 和 Elika J. Etemad 等人。First Public Working Draft 发布于 2011 年 7 月 12 日；2012 年 4 月 17 日该规范达到 Candidate Recommendation 状态，锁定了无前缀的现代语法，包括 0deg 指向上方（顶部）、to right 等同于 90deg 的约定。浏览器发货顺序：WebKit 一骑绝尘最早，Safari 4（2009）就能用 -webkit-gradient()，但语法是一种以函数调用为主的写法。Firefox 在 Firefox 3.6（2010 年 1 月 21 日）发布 -moz-linear-gradient()；Internet Explorer 10 于 2012 年支持无前缀形式；无前缀语法在 2013 年底前在所有主流引擎上稳定下来。conic-gradient() 较晚才在 CSS Images Level 4 中规范，Lea Verou 在 2011 年起草提案，Tab Atkins 在 2012 年将其加入规范，原生支持随后在 Chrome 69（2018 年 9 月 4 日）、Safari 12.1（2019 年 3 月 25 日）以及 Firefox 83（2020 年 11 月 17 日）到位。到 2026 年，你可以放心地写 background: linear-gradient(...) 与 background: radial-gradient(...)，无需前缀，无需为任何还值得支持的浏览器加 fallback。

linear-gradient：角度、边、以及那点对角线的微妙之处

形式语法是 linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...)。角度约定常把开发者绊住，因为它跟 SVG/canvas 的约定不一样。0deg 等同于 to top，渐变线指向上方，所以最后一种颜色出现在顶部。90deg 等于 to right。180deg 等于 to bottom（不指定方向时的默认值）。270deg 等于 to left。135deg 是经典对角线（左上到右下，现代 Web 设计里最常见的渐变方向。角度按顺时针从正上方增长）与数学约定（0 在右、角度按逆时针增长）相反，也与 SVG 的 <linearGradient> 相反。一处有用的微妙之处：to right 和 90deg 只在正方形盒子上等价。在非正方形盒子上，to top right 生成的渐变线恰好与「从左下角出发到右上角」的对角线垂直，意味着渐变干净地命中角点；而 45deg 无论盒子比例如何，永远字面是 45°。对绝大多数 hero 背景来说这点差异无关紧要；对要求精确对齐的设计则可能有意义。

radial-gradient：形状、尺寸与位置

语法为 radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...)。两个形状取值：circle（按盒子缩放的正圆）与 ellipse（默认，按盒子长宽比拉伸）。尺寸可以是四个范围关键字之一，或显式的长度/百分比。closest-side：结束形状触及最近的一条边。closest-corner：结束形状精确穿过最近的一个角。farthest-side：结束形状触及最远的一条边。farthest-corner（默认）：结束形状穿过最远的一个角。at <position> 子句可移动中心点，at top left、at 30% 70% 等等。默认中心是 at center center。用径向渐变可以做聚光灯效果、柔和光晕、边缘逐渐变黑的「暗角」背景、以及圆形徽章背景。在 2026 年生产环境里，径向渐变明显比线性渐变少见（你在落地页见到的多数「渐变」背景都是线性的）但在线性渐变够不到的场景里，它们不可或缺。

色标（color stops），渐变的心脏

一个 color stop 是一个颜色值，外加可选的「沿渐变线上的位置」。linear-gradient(red, blue) 把红色放在 0%、蓝色放在 100%，并在二者之间做平滑插值。linear-gradient(red 0%, yellow 50%, blue 100%) 在中间加了一个黄色色标。带显式位置的色标可放在 0% 到 100% 的任意位置；不带显式位置的色标，会在它们左右两个显式位置之间均匀分布。硬色标（hard color stops）（两个色标放在同一位置，例如 linear-gradient(red 50%, blue 50%)）会产生瞬时切换而非平滑过渡。这就是每一种 CSS 图案背后的招式：条纹、棋盘、圆点，都靠带硬色标的渐变堆叠而成。颜色插值提示（CSS Images Level 4）：在两个色标之间塞入一个裸百分比，会把插值的中点偏移到该位置。linear-gradient(red, 25%, blue) 把感知上的中点从默认 50% 改到 25%，可微妙地让一种颜色在视觉上更占主导。现代颜色空间插值（CSS Color Module 4，2023+ baseline）：linear-gradient(in oklch, red, blue) 在感知均匀的 Oklab 颜色空间里插值，而不是 gamma 编码的 sRGB（这能消除 sRGB 在两种高饱和度互补色之间过渡时那条「死区」般浑浊的灰色，让中段过渡更顺滑。默认仍是 in oklab（在较旧的浏览器上是 in srgb））手工搭建的渐变可以选择启用。

现代颜色空间，为什么 oklch 渐变看起来更好

二十年来，每一个 CSS 渐变都是在 sRGB（Web 长大的那种 gamma 编码颜色空间）里对颜色值做插值。sRGB 插值有一个众所周知的失败模式：高饱和度互补色之间（红 ↔ 绿、蓝 ↔ 黄、品 ↔ 青）的渐变会经过一个浑浊的灰色中点。在 sRGB 下试一下 linear-gradient(red, green)，中间是棕色，而不是你眼睛预期的明亮橄榄色。Oklab（Björn Ottosson，2020 年 12 月）就是为修这件事专门设计的感知均匀颜色空间。OKLCH 是 Oklab 的柱坐标形式，三个分量是 Lightness（0-100%）、Chroma（0+）、Hue（0-360°）。OKLCH 下的渐变能在整段过渡中保持感知上的平滑：亮度均匀爬升，色相沿色轮可预测地旋转。CSS Color Module 4 在渐变函数中加了一个 <color-interpolation-method> 参数：linear-gradient(in oklch, red, blue)。浏览器支持在 2023 年中后期达到 baseline（Safari 16.4 2023 年 3 月、Chrome 111 2023 年 3 月、Firefox 113 2023 年 5 月）。对于生产设计系统中的渐变，越来越多人把 OKLCH 当作默认选项；本生成器目前输出的是 sRGB 默认渐变，OKLCH 切换在 roadmap 上。

性能，渐变便宜，但不是免费

现代浏览器对 CSS 渐变都做 GPU 加速，这让它们在大多数场景下比拼接位图快得多，无 HTTP 请求、无解码、矢量级分辨率无关、可通过 CSS 变量瞬间换色。要注意的取舍：paint 成本随被绘制像素数和渐变复杂度增加；渐变是浏览器最贵的绘制操作之一，在整屏 hero 上堆很多层渐变可能在低端 GPU 上掉帧。动画化渐变颜色会让每一帧都触发完整 repaint，比动画化 transform 或 opacity 贵得多。现代解法是用 @property 注册的自定义属性（Houdini Properties and Values API），它让浏览器在 compositor 线程而非主线程上对颜色值进行插值；支持情况：Chrome 78+（2019 年 11 月）、Safari 16.4+（2023 年 3 月）、Firefox 128+（2024 年 7 月）。更便宜的传统替代是把 background-position 在固定渐变上做动画，一种真正的 compositor-only 动画，在哪都能跑 60fps。一条经验法则：如果你这页只有一个静态渐变，永远不会有感觉；如果你在一个长列表的每张卡片上叠了五层动画渐变，发布前先做一次性能 profile。

渐变真正派上用场的地方

• Hero 区域背景。页面标题后柔和的品牌色渐变，常常再叠一层细微的径向 overlay 做出氛围深度。Stripe、Linear 以及大多数现代 SaaS 的落地页都很爱用。
• 按钮样式。主要 CTA 按钮加点细微渐变，能带来纯色按钮没有的「触感深度」。再给 hover 态来一段略深一点的渐变，按钮就有「活起来」的感觉。
• 图片之上的可读性 overlay。一层从上方透明渐变到下方深色的纵向 linear-gradient，叠在 hero 图之上，把白色文字放到深色区域里，无论照片本身长什么样，文字都清晰可读。
• 卡片背景。给卡片背景叠一道细微渐变，能在不用沉重 box-shadow 的情况下增加层次感。
• 骨架屏与进度指示器。经典的「闪烁骨架」其实就是一段线性渐变里的半透明白色在灰色底上滑过，通过 background-position 做动画。
• 毛玻璃（glassmorphism）与现代 UI 风格。由 macOS Big Sur 与 iOS 推热的磨砂玻璃效果，半透明背景配 backdrop-filter blur，常再叠一道细微渐变做出高光感。
• 仿 mesh-gradient。真正的 CSS mesh 渐变还未成为标准（CSS Images Level 5 终将补上），但用 3-5 个大的径向渐变、配半透明颜色叠在一起，今天就能做出令人信服的 mesh-gradient 效果。

诚实边界：这个生成器做与不做

本工具用现代无前缀语法生成线性与径向 CSS 渐变，配实时预览、可配置的角度（线性）或位置（径向），并支持任意数量带位置的色标。本工具目前不做、但更完整的生成器会处理的功能：圆锥渐变（conic gradients）（绕中心旋转那种，用于饼图、光芒、色轮），参见 Absolutool 的 CSS Pattern Generator 看一些圆锥图案示例；重复渐变（repeating-linear-gradient、repeating-radial-gradient、repeating-conic-gradient），条纹、图案式填充（也由 CSS Pattern Generator 负责；OKLCH / Oklab 插值开关（现代感知均匀颜色空间））目前默认输出 sRGB；color hint 语法用于让色标之间的中点偏移；多色标的动画 keyframes。对生产环境里的多数渐变（hero 背景、按钮风格、overlay 效果），线性 + 径向已经够用；对那些更冷门的场合，CSS Pattern Generator 才是合适的搭档工具。

常见问题

CSS 渐变是否被所有浏览器支持？

是的。自 2013 年以来，CSS 渐变已被所有主流浏览器支持，全球覆盖率超过 98%。现代使用中不再需要 -webkit- 等厂商前缀。

对角线渐变该用多少度？

135 度形成由左上到右下的对角线，是最常见的方向。45 度从左下到右上。90 度从左到右，180 度从上到下。

可以用两种以上的颜色吗？

当然。点击「添加色标」可最多添加 8 个色标。您可以控制每个色标的颜色和在渐变中的位置。多色标渐变能产生更丰富、更动感的视觉效果。

为什么没有圆锥渐变选项？

圆锥渐变（绕中心旋转那种，用于饼图、光芒、色轮）跟线性/径向渐变是不同的设计问题，参数是绕一个中心点的角度，而不是沿一条线的位置。圆锥渐变的示例和图案请用 Absolutool 的 CSS Pattern Generator，它处理这些较冷门的情形（conic、repeating-linear、repeating-conic）以及图案式填充。本生成器聚焦于覆盖生产环境绝大多数 hero 与按钮渐变的 linear+radial 用例。

CSS 渐变比图片背景更快吗？

多数情况下是的，CSS 渐变省掉一次 HTTP 请求、一次解码，以及为 Retina 屏准备多分辨率素材所需的发布流程；渐变在任意缩放下都是矢量精确的，并可通过 CSS 变量轻易换色。代价：渐变虽然在 GPU 上绘制，但 paint 成本随像素面积和色标复杂度增加；在整屏 hero 上堆很多层渐变，在低端 GPU 上可能掉帧。做动画时，请动画化 background-position（compositor-only，便宜），不要去动画化渐变的色标本身（完整 repaint，昂贵）。卡片或 hero 区域上单个静态渐变，永远感觉不到。

我的数据会被发送到任何地方吗？

不会。生成完全在你的浏览器里运行，颜色选择器、角度滑块、CSS 代码生成全是本地完成。你在使用控件时不会有任何出站请求。生成的 CSS 是你的，可以粘到任何地方。

相关工具