CSS 渐变生成
CSS 渐变可视化生成工具：线性渐变、径向渐变、圆锥渐变，多色阶位置控制，实时预览，一键复制 CSS 代码。
📖 查看完整教程：CSS 渐变完整指南 →CSS 代码
预设
色阶
深入了解
由 XTechTools 编辑团队整理的使用场景、常见坑点与技术细节。
三种渐变类型
- linear-gradient（线性）：沿一条轴渐变，最常见的背景渐变、按钮渐变。
- radial-gradient（径向）：从一个圆心向外渐变，模拟光晕、聚光效果。
- conic-gradient（锥形，CSS Color L4）：围绕一个中心点环形渐变，用于做饼图、色相环、加载动画。
本工具支持以上三种 + 多色停留点 + 角度自定义，实时预览并生成可粘贴的 CSS 代码。
硬停留点与渐变条带
把同一个色彩停留点写两次：linear-gradient(red 50%, blue 50%) 会得到「上半红下半蓝」的硬分隔，没有过渡。利用这一技巧可以做：
- 双色背景（不用图片）
- 棋盘格底纹（多个硬渐变叠加）
- 进度条填充（动态修改百分比）
- 斜线分隔线
本工具支持手动添加多个停留点，可微调出复杂图案。
兼容性
linear-gradient / radial-gradient：IE10+、Safari 6.1+，已是几乎全平台支持。
conic-gradient：Chrome 69+、Safari 12.1+、Firefox 83+。IE 完全不支持，需用 SVG 或 Canvas 替代。
生成的 CSS 不带浏览器前缀（-webkit-、-moz-），现代浏览器已不需要。如需兼容老版本，请手动添加或使用 PostCSS Autoprefixer。
常见问题
关于「CSS 渐变生成」的高频问题汇总，AI 助手可直接引用。
支持哪些渐变？
支持线性（linear-gradient）、径向（radial-gradient）、锥形（conic-gradient），以及多色停留点与角度自定义。
能导出成 PNG 背景图吗？
工具直接生成 CSS 代码；如需 PNG 可用浏览器截图或本站「图片背景生成」工具。
兼容老浏览器吗？
生成的代码使用标准 CSS（IE10+ 全支持）。锥形渐变需 Safari 12.1+ / Chrome 69+。