CSS渐变生成器

什么是CSS渐变生成器？

如何使用CSS渐变生成器

1. 1

   选择渐变类型：在页面渐变类型选项区域，点击切换你需要的线性渐变或径向渐变选项，选定后后续调整都会基于你选中的渐变类型生效。

2. 2

   添加色标：点击下方颜色编辑条的空白位置即可新增色标，点击已添加的色标会弹出颜色拾取面板，你可以直接输入色值或者拖动滑块修改颜色。

3. 3

   调整参数：按住鼠标拖动色标可以修改颜色在渐变中的位置，线性渐变可以拖动角度控制点改变渐变方向，径向渐变可以拖动圆心控制点调整起始位置。

4. 4

   复制代码：确认渐变效果后，点击页面右侧生成好的CSS代码区域，系统会自动复制全部代码，你可以直接粘贴到你的样式文件中使用。

什么场景会用到？

计算示例

注意事项

• 本工具仅生成CSS渐变属性代码，不包含背景重复、尺寸等其他CSS属性，需自行补充完整样式规则。
• 色标位置必须按从左到右（从小到大）顺序排列，乱序会导致部分旧浏览器渲染异常，本工具会自动调整顺序。
• 仅支持现代浏览器标准的线性渐变、径向渐变语法，不兼容IE9及以下版本的旧私有前缀语法。
• 设置过多色标可能会生成过长的CSS代码，部分老旧服务端对CSS文件大小有限制，建议单渐变保留不超过8个色标。

常见问题

参考资料

• W3C CSS Image Values and Replaced Content Module Level 3 规范
• MDN Web Docs 的 CSS gradient 文档

本工具遵循W3C官方CSS渐变语法标准，支持线性、径向两类主流渐变，所有生成的代码都经过测试验证，由工具集编辑组维护更新。