CSS 渐变生成器

将 background（或 background-image）属性设置为渐变函数。最简单的是双色线性渐变：background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — 这会从靛蓝色到粉红色从左向右渐变。在上方选择颜色和角度，然后直接将生成好的 background 代码复制到你的样式表。无需手写语法 — 生成器会在你拖动每个颜色节点时实时构建代码。

linear-gradient 沿着你选择角度的直线混合颜色（例如 90deg = 从左到右）。radial-gradient 从中心点向外以圆形或椭圆形扩散混合，如同聚光灯效果。conic-gradient 像时钟指针一样围绕中心点旋转扫描颜色，非常适合制作色轮和饼图。此工具支持全部三种类型；点击「线性 / 径向 / 锥形」按钮即可切换。大多数免费渐变工具（如 Canva 的背景生成器）仅支持线性渐变，而 cssgradient.io 完全不支持锥形渐变。

将渐变应用于任意元素的 background 属性。全页背景可参考：body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }。由于渐变被视为图像，你还可以添加 background-attachment: fixed;，使背景在页面滚动时保持固定。在上方可视化构建后复制CSS代码，无需 Figma、Canva 或任何设计工具。2026年无需前缀，在所有现代浏览器中均可正常工作。

添加额外的颜色节点，每个节点都有自己的位置。点击渐变条上的任意位置（或点击「+ 添加节点」按钮）放置新节点，然后拖动到目标位置。三色渐变效果如：linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%)。节点数量没有实际限制 — 按照设计需求添加即可。与 coolors.co 只展示调色板而不提供实际CSS、Canva 需要登录账号才能编辑渐变不同，这里可立即生成支持无限节点的生产可用CSS代码。

对于线性渐变，第一个值是角度：0deg 向上，90deg 向右，180deg 向下，270deg 向左。你也可以使用关键词，如 'to right' 或 'to bottom right'，因此 linear-gradient(to right, ...) 等同于 linear-gradient(90deg, ...)。拖动角度滑块或点击上方的方向箭头，值会实时更新。输出的CSS实时同步，可直接复制粘贴到任何样式表或框架中。

在2026年，不需要。linear-gradient、radial-gradient 和 conic-gradient 在所有现代浏览器中均已无需前缀支持，因此普通的 background: linear-gradient(...) 就足够了。只有面向非常旧的 Safari/iOS（2017年之前）或旧版 Android WebView 才需要添加 -webkit- 前缀。勾选CSS输出中的「添加 -webkit- 前缀」选项，工具会在标准代码上方自动生成正确转换的回退代码。角度转换（webkit版本中90deg变为270deg）会自动处理。

使用渐变工具类：一个方向类加上 from-、via- 和 to- 颜色，例如 bg-gradient-to-r from-indigo-500 to-pink-500。精确颜色可使用任意值：bg-gradient-to-r from-[#6366f1] to-[#ec4899]。将输出切换到 Tailwind 标签页，即可复制当前渐变的类名，包括径向和锥形渐变的 bg-[linear-gradient(...)] 任意值写法（Tailwind 对这些没有具名简写）。大多数 Tailwind 渐变资源都没有涵盖这一边界情况。

点击「下载PNG」。工具会将你的精确渐变效果绘制到 1600x900 的 HTML 画布上并保存为 .png 文件，非常适合用作幻灯片背景、社交媒体横幅或设计原型。完全在浏览器中渲染，无需上传任何内容。与需要上传文件到服务器的 TinyWow，或将PNG导出功能置于付费订阅后的 Adobe Express 不同，这里没有隐私风险，也没有任何费用。需要其他尺寸？之后用任意图像编辑器缩放或裁剪PNG即可。

点击「从图片生成」并选择一张照片。工具在本地读取像素，找出最常见的颜色，并据此生成渐变 — 快速匹配品牌照片或产品图的好方法。你的图片不会离开设备；它在浏览器中完成分析后立即被丢弃。与需要上传文件或登录账号才能提取调色板的 Adobe Color 或 Coolors 不同，所有数据均保留在你的设备上，完全私密。之后你可以调整提取出的节点、更改角度，或切换为径向或锥形渐变。

锥形渐变围绕中心点旋转颜色，而非沿直线过渡，因此颜色切换就像时钟指针扫过一样。conic-gradient(from 0deg, red, yellow, green, blue, red) 可以制作完整的色轮。它们非常适合饼图、环形图、进度环、颜色选择器和角度发光效果。自2021年起，Chrome、Firefox、Safari 和 Edge 均已原生支持，无需前缀。在上方选择「锥形」，设置起始角度和中心点位置，尽情探索吧。大多数渐变生成工具根本不支持锥形渐变。

为某个节点设置透明度值。降低节点上的「不透明度」滑块，CSS会自动切换为 rgba()。例如，linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) 从全透明渐变到60%黑色，是照片文字背景的经典遮罩效果。提示：在同一颜色的透明和实色之间过渡（而非在两种不同的全透明颜色之间），可以避免浏览器产生脏灰色中间点。工具在你调整节点不透明度时会自动处理 rgba() 输出。

UtiloKit 的渐变生成器涵盖这些工具的所有功能 — 线性、径向和锥形渐变类型、多节点编辑器、代码复制 — 还额外提供 Tailwind CSS 输出、PNG下载、从图片提取渐变、可分享链接以及动态渐变支持。cssgradient.io 不支持锥形渐变，也没有 Tailwind 输出。Colorzilla 的渐变编辑器是浏览器扩展，无法导出PNG或生成 Tailwind 代码。这里的所有功能在浏览器中运行，无需上传，无需注册，无广告拦截功能访问。

可以。该工具完全响应式，适用于任何现代移动浏览器。在 iPhone 的 Safari 或 Android 的 Chrome 中打开，构建渐变效果，然后直接将CSS复制到剪贴板。由于所有操作均在客户端运行，无需下载，即使在移动网络较慢的情况下，页面加载后也能正常使用。拖动式节点编辑器已适配触控操作，在手机上创建多节点渐变同样得心应手。