手写渐变语法很麻烦：角度、节点顺序和百分比位置相互影响，一个小失误就会让整个background失效。这款生成器让预览和代码始终保持一致，所见即所得，复制的CSS与预览分毫不差。所有计算都在客户端完成，设计内容不会被上传到任何地方。
免费CSS渐变生成器
全程在浏览器中运行，无需上传，无需注册。
类型
颜色节点
CSS代码
什么是CSS渐变生成器？
CSS渐变生成器是一款可视化工具，能自动生成linear-gradient()、radial-gradient()或conic-gradient()代码。选好颜色，拖动节点位置，设置角度，即可复制可直接粘贴的CSS，实时预览与浏览器渲染效果完全一致。所有操作都在浏览器本地完成。
使用方法
- 1选择渐变类型. 选择线性、径向或锥形。线性会显示角度滑块；径向可设置形状（圆形或椭圆形）和位置；锥形有起始角度和位置。
- 2设置颜色节点. 点击色块选择颜色，拖动滑块调整节点在渐变中的位置。最多可添加8个节点，最少保留2个。
- 3调整方向. 拖动角度滑块（0到360度），或直接选择方向关键词。每次改动预览都会实时更新。
- 4复制CSS代码. 点击复制即可获取background声明，其中包含纯色回退，直接粘贴到样式表中即可使用。
适用人群
- 前端开发者：需要为主视觉区块、卡片或按钮设置背景，又不想死记
linear-gradient()语法。 - 网页与UI设计师：还原设计稿中的渐变效果，直接把生成的CSS交给开发团队。
- 邮件和落地页制作者：需要纯色回退方案，让设计在旧版客户端也能优雅降级，输出会自动附带。
- 学习CSS的学生：想实时看到角度、颜色节点和渐变类型如何影响最终效果。
常见问题
这个CSS渐变生成器免费吗？
是的，完全免费，无需注册，没有水印，也没有使用次数限制。可以随意创建渐变，并将CSS直接复制到项目中。
会上传数据到服务器吗？
不会。渐变的生成和预览完全在浏览器本地通过JavaScript完成，颜色、代码或使用数据都不会被发送出去。
线性、径向和锥形渐变有什么区别？
线性渐变沿着指定角度的直线方向混合颜色；径向渐变以圆形或椭圆形从中心点向外扩散；锥形渐变则像色轮或饼图一样围绕中心点旋转过渡颜色。
CSS渐变中的颜色节点是如何工作的？
每个节点由一个颜色和渐变线上0%到100%之间的位置组成，浏览器会在相邻节点之间平滑过渡。如果两个节点位于同一位置，就会形成硬边界而不是平滑过渡，常用于制作条纹或饼图效果。
哪些浏览器支持这些渐变？
Chrome、Firefox、Safari和Edge等主流浏览器均支持无前缀的linear-gradient()和radial-gradient()，conic-gradient()自2020年起也已被广泛支持。复制的代码还包含一个纯色回退，兼容更旧的浏览器。
可以把生成的渐变用作文字颜色吗？
不能直接使用，因为渐变是图像而非颜色。需要把渐变设为文字元素的background-image，再加上background-clip: text和color: transparent，让渐变透过文字显示出来。
为什么我的渐变会出现色带？
当两个相距较远的节点在相近色调之间过渡时，8位色彩的分级就会显现为色带。可以通过添加中间颜色节点、缩短过渡距离，或选择明度差异更大而不只是色相不同的颜色来减少色带。