CSS 渐变生成器
线性 / 径向渐变，最多 4 个色标自由定位，实时预览，一键复制 CSS 代码。纯浏览器本地运行。
渐变类型
角度
135°
色标
CSS 代码
background: linear-gradient(135deg, #bf4324 0%, #f6f3ec 100%);渐变由浏览器矢量绘制，任意分辨率都清晰；代码兼容所有现代浏览器。
怎么用
- 选类型：线性渐变沿一个方向过渡，径向渐变从中心向外扩散。
- 调色标：每个色标有颜色和位置两个属性；添加到 4 个色标可以做出多段过渡。
- 看预览：预览区即时反映所有改动，满意为止。
- 复制 CSS：把代码粘到任意元素的 background 属性即可使用。
常见问题
什么是 CSS 渐变？
CSS 渐变是浏览器实时绘制的颜色过渡效果（linear-gradient / radial-gradient），不是图片——放大不失真、体积几乎为零、颜色可随时改代码调整，是网页背景和按钮的首选方案。
径向渐变和线性渐变有什么区别？
线性渐变沿一条直线方向过渡（用角度控制方向，如 135° 是左上到右下）；径向渐变从中心点向四周扩散（ellipse 椭圆或 circle 圆形），适合做光晕、聚光灯效果。
能导出成图片吗？
不需要导出——渐变本来就是代码，直接粘到 CSS 里比图片更清晰、更小、可维护。真需要位图（如某些设计软件不支持 CSS），对预览区截图即可。
浏览器兼容性如何？
现代浏览器（Chrome、Edge、Firefox、Safari 12.1+）全部支持标准写法，本工具生成的就是标准语法，无需加前缀。Internet Explorer 已停止支持，不在考虑范围。