CSS 渐变生成器

免费在线 CSS 渐变生成器，支持线性渐变和径向渐变、多色标、角度调节、实时预览，一键复制 CSS 代码，所有数据仅在浏览器本地处理。

浏览器本地处理 · 内容不上传

一个可视化 CSS 渐变生成工具。支持线性渐变和径向渐变模式，可添加多个色标、调节角度和位置，实时预览渐变效果，一键复制 CSS 代码，所有处理均在浏览器本地完成。

正在加载工具…

使用说明

如何使用CSS 渐变生成器

适用场景

常见问题

CSS 渐变生成器可以做什么？

可视化创建 CSS linear-gradient 和 radial-gradient，实时预览效果，一键复制标准 CSS 代码到项目中。

生成的代码兼容哪些浏览器？

生成标准 CSS3 渐变语法，兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），IE10+ 支持但有部分限制。

数据会上传服务器吗？

不会。所有渐变计算和预览均在浏览器本地完成，不会上传到任何服务器。

支持哪些渐变类型？

支持线性渐变（linear-gradient）和径向渐变（radial-gradient），以及对应的 repeating 重复渐变模式。

如何添加多个颜色停止点？

点击「添加颜色」按钮即可新增一个颜色停止点，每个停止点可独立设置颜色和位置百分比。