CSS 渐变生成器

CSS 渐变生成器的使用场景

• 给按钮、卡片或页面背景调一段渐变
• 写组件文档时快速给出可复制的 CSS 示例
• 想对比同一组色标在三种渐变下的观感

CSS 渐变生成器怎么用

1. 选择渐变类型并拖动角度滑块
2. 增删色标、改颜色与位置百分比
3. 查看预览并复制生成的 CSS

常见问题

和站内的配色生成器有什么区别？

配色生成器是输入一个主色后推算整套色阶、互补色与配色方案；本工具不推配色，只把你给定的色标拼成规范的 CSS 渐变代码，并可切换三种渐变类型。

色标最多能加几个？

最多 8 个，最少保留 2 个；位置按 0–100% 填写，工具不会自动排序，浏览器按书写顺序渲染。

生成的 CSS 兼容性如何？

linear-gradient 与 radial-gradient 所有现代浏览器都支持；conic-gradient 需要较新版本，老项目建议加纯色 background-color 兜底。