🌈 CSS渐变生成器
几秒钟内创建漂亮的线性或径向CSS渐变 — 选择颜色，调整角度或形状，添加任意数量的颜色停止点，单击即可复制完成的CSS代码。完全免费，并且完全在您的浏览器中运行。
°
预览
隐私优先设计. 此工具完全在您的浏览器中运行 — 您输入的任何内容都不会上传或存储，并且可以离线使用。
关于
此工具可让您在不编写一行代码的情况下直观地构建CSS渐变。选择线性渐变或径向渐变，设置角度或形状，使用颜色选择器和位置滑块管理颜色停止点，并实时预览结果。内置的八个预设（日落、海洋、极光、霓虹灯等）为您提供一个良好的起点。由于所有操作都在您的浏览器中本地运行，使用纯JavaScript，没有任何颜色数据或设计信息会离开您的设备 — 没有服务器、没有账户、没有任何类型的跟踪。
如何使用
- 从渐变类型下拉菜单中选择渐变类型 — 线性或径向。
- 对于线性渐变，使用滑块或数字输入设置角度（0–360°）。对于径向渐变，选择椭圆或圆形作为形状。
- 在颜色停靠点面板中单击颜色色块以打开颜色选择器，然后拖动位置输入框将每个停靠点精确放置在您想要的位置。
- 点击 + 添加停靠点，可在最大间隙处自动插入新的颜色停靠点，或点击 ✕ 按钮删除任何停靠点（最少需要 2 个停靠点）。
- 点击复制CSS以将完成的背景：linear-gradient(…)或radial-gradient(…)声明复制到剪贴板，并直接粘贴到您的样式表中。
常见问题
- CSS渐变生成器可以免费使用吗？
- 是的，完全免费 — 没有订阅，没有账户，也没有隐藏的使用限制。打开页面，立即开始创建渐变。
- 此工具在没有互联网连接的情况下可以离线使用吗？
- 是的。一旦页面加载完成，整个工具即可离线使用，无需进行任何外部API调用、CDN依赖或服务器请求。在飞机上或网络受限的环境中使用是安全的。
- 我的颜色数据或设计会发送到服务器吗？
- 不。所有渐变生成和预览渲染都是在您的浏览器中通过JavaScript本地完成的。您的颜色选择仅保存在浏览器的localStorage中，绝不会传输到任何地方。
- 线性渐变和径向渐变有什么区别？
- 线性渐变沿给定角度（例如 135deg）的直线过渡颜色。径向渐变从椭圆或圆形的中心点向外辐射颜色。两者输出的标准 CSS 在所有现代浏览器中均可使用。
- 我可以添加多少个颜色停靠点？
- 没有内置的限制 —— 您可以添加任意数量的颜色停靠点（最少 2 个）。新的停靠点会自动放置在渐变中最大的间隙处，并预填充该位置的插值颜色，以提供一个平滑的起点。
- 此工具会上传我的数据吗？
- 不会。所有操作都在您的浏览器中完成，因此您的数据永远不会离开您的设备 — 甚至在页面加载后也可以离线使用。