祈灵工具箱🌈CSS 渐变生成器 - 在线可视化制作线性/径向/锥形渐变，导出 CSS 与 PNG
做网页背景、按钮、卡片或海报时经常需要一段好看的渐变。这个工具把 CSS 渐变变成可视化操作：在色条上点击即可添加色标，拖动调整位置，选中后修改颜色和不透明度，按 Delete 删除；线性渐变用角度盘拖动设置方向（按住 Shift 以 15° 吸附），径向渐变可选椭圆或正圆并调整中心点，锥形渐变可设起始角度，还支持 repeating 重复渐变。预览区带透明棋盘格，半透明色标一目了然。右侧预设库提供海洋、日落、极光、彩虹、色轮等常用渐变，点一下即可在此基础上修改，也可以一键随机配色。生成的 CSS 带一行纯色兜底，Tailwind 用户可以直接复制 bg-[linear-gradient(...)] 任意值类名。需要图片时，可按 1920×1080、手机壁纸、正方形、OG 分享图等尺寸导出 PNG，导出的画面与 CSS 效果一致。
免费 · 无需注册 · 浏览器本地处理最后更新：
正在加载工具...
如何使用CSS 渐变生成器
- 1选择线性、径向或锥形渐变，或从预设中挑一个
- 2在色条上添加、拖动色标，调整颜色、透明度和角度
- 3复制 CSS / Tailwind 代码，或设置尺寸导出 PNG
常见问题
- 生成的 CSS 渐变兼容哪些浏览器？
- linear-gradient 和 radial-gradient 在所有现代浏览器中都无需前缀，conic-gradient 需要 Chrome 69+、Safari 12.1+、Firefox 83+。工具输出的第一行 background 纯色是给极旧浏览器的兜底，它取所有色标的平均色。
- 怎么在 Tailwind CSS 里使用？
- 复制“Tailwind 任意值”里的类名，例如 bg-[linear-gradient(90deg,#f97316_0%,#8b5cf6_100%)]，直接写在 class 里即可，空格已按 Tailwind 规则替换成下划线，Tailwind v3 和 v4 都支持。
- 导出的 PNG 和网页上的效果一样吗？
- 一样。导出时按 CSS 规范在 Canvas 上重新绘制：线性渐变按角度计算渐变线长度，径向渐变使用默认的 farthest-corner 尺寸，锥形渐变从指定角度开始，所以任何宽高比下都与 CSS 预览一致。repeating 重复渐变目前只影响 CSS 输出。
- 色标可以设置透明吗？
- 可以。选中色标后拖动“不透明度”滑块，输出会自动变成 rgba() 颜色，预览区的棋盘格能看出透明效果，导出 PNG 时也会保留透明通道，适合做叠加在图片上的渐变遮罩。