CSS 渐变生成

什么是CSS 渐变生成？

CSS 渐变生成工具是一个可视化编辑器，通过拖动色标、调整角度或圆心位置，实时预览线性渐变（linear-gradient）或径向渐变（radial-gradient）效果，并一键复制生成好的 CSS 代码，不需要手写渐变语法和记忆颜色/角度参数顺序。 CSS 渐变是浏览器原生支持的背景绘制方式，线性渐变按指定角度在几个颜色点之间过渡，径向渐变则从一个中心点向外以圆形或椭圆形扩散过渡，都可以设置多个颜色停止点（color stop）并指定每个停止点的位置百分比。

为什么使用CSS 渐变生成？

手写 linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%) 这种代码时，角度、颜色顺序、位置百分比全靠脑内模拟效果，调整一次要保存刷新看效果，来回很慢。可视化工具可以直接拖动看到实时预览，调好了再复制代码粘贴进项目，效率高很多，尤其是三个颜色以上的复杂渐变。 和用设计软件做渐变再截图相比，这个工具直接产出可用的 CSS 代码，不需要设计师额外导出规格给开发实现，开发者自己就能一步到位拿到能跑的样式代码。

使用示例

使用提示

颜色停止点不需要平均分布，把关键颜色的位置往你想强调的一侧靠拢，能让渐变的视觉重心更符合设计意图；另外深色背景上叠加渐变时，注意检查文字对比度是否依然满足可读性要求。