渐变生成器
创建精美的 CSS 渐变，实时预览效果。选择预设或自定义渐变。复制 CSS 代码或下载 PNG 图片。
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);0°360°
%
%
所有处理均在浏览器中完成，不会向任何服务器发送数据。
如何创建渐变
1
选择类型
选择线性、径向或锥形渐变类型。
2
设置颜色
添加颜色节点并调整位置，精细调整渐变效果。
3
调整角度
使用角度滑块控制渐变方向。
4
导出
复制 CSS 代码用于网站，或下载 PNG 图片。
常见问题
可以创建哪些类型的渐变？
您可以创建三种类型：线性渐变（直线颜色过渡）、径向渐变（从中心向外的圆形颜色过渡）和锥形渐变（围绕中心点的颜色过渡，类似饼图）。
生成的 CSS 代码可以直接使用吗？
可以！点击复制 CSS 按钮即可复制渐变代码，直接粘贴到 CSS 文件中作为 background 属性使用。所有现代浏览器均支持。
下载图片的最大尺寸是多少？
您可以将输出尺寸设置为最大 4096 x 4096 像素。默认为 800 x 600 像素，适合大多数网页背景使用。
颜色节点是如何工作的？
颜色节点定义渐变中的颜色及其出现位置。每个节点有一个颜色和一个位置值（0-100%）。至少需要 2 个节点，可以添加更多以实现复杂渐变效果。
我的数据安全吗？
完全安全。所有渐变生成均在浏览器中通过 Canvas 完成。不会向任何服务器发送数据，也不会存储或跟踪任何内容。
使用场景
网页设计背景
使用自定义 CSS 渐变创建吸引眼球的 Hero 区域、横幅和页面背景，与品牌风格完美搭配。
社交媒体图片
为社交媒体帖子、故事和封面图片生成鲜艳的渐变背景，在信息流中脱颖而出。
演示文稿幻灯片
设计专业的幻灯片背景，流畅的颜色过渡提升演示效果。
UI 元素
为按钮、卡片、导航栏等 UI 组件添加渐变背景，打造现代外观。
邮件设计
下载渐变图片用于邮件头部和背景，适合不支持 CSS 渐变的邮件客户端。
应用设计与原型
快速使用渐变背景制作应用界面原型。导出 CSS 用于 Web，或导出 PNG 用于原生应用模型。
创建完美的渐变
实时预览设计精美渐变。复制 CSS 或下载 PNG - 免费且简单。