什么是渐变转 CSS？

可视化渐变生成器，支持设计线性、径向和圆锥渐变，可添加多个颜色节点，然后复制 CSS 代码。通过实时预览调整角度、位置和颜色。

在渐变条上拖动色标就能实时看到预览效果,支持线性、径向和锥形渐变三种类型。可以粘贴现有的 CSS 渐变直接编辑,也能从预设(Sunset、Aurora、Rainbow 等)里取色,改完角度后一键复制语法。输出是纯 CSS,没有浏览器前缀,也没有任何 JS 运行时。

使用方法

1. 选择渐变类型（线性、径向或圆锥），并设置方向或角度。
2. 点击渐变条或使用颜色选择器，添加、删除或调整颜色节点。
3. 复制生成的 CSS 代码，直接粘贴到您的样式表中使用。

何时使用

• 首屏 banner 想做精确控制的渐变背景,色标位置和角度都要拿捏到位。
• 样式表里已有一段渐变,粘进来可视化编辑后再复制回去。
• 做扇形/饼图风格的色块,或彩虹色 loader,需要 conic-gradient。

结果

试试日落渐变：linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%)——很适合做首屏背景。

常见问题

linear、radial、conic 三种渐变有什么区别?

linear 沿一个直线方向铺色;radial 从中心点向外辐射,形成同心圆环;conic 像饼图一样绕中心旋转扫过。三者的色标语法一致。

我已有的 CSS 渐变怎么导入?

把完整声明粘进 Import 输入框,例如 background: linear-gradient(135deg, #ff6b35, #f72585);,点 Import。编辑器会自动解析角度、色标和类型并填充进可视化界面。

为什么有的屏幕上会看到色带?

相邻色标的色相相差较大、屏幕又是 8 位色深时,容易出现色带。可以在中间加一个过渡色标,或者缩小角度跨度。HDR 渲染的浏览器色带会少很多。

这段 CSS 能当作 background-image 用吗?

可以。复制出来的字符串,可以放在 background、background-image,或者任何接受图像的 CSS 属性里——border-image、mask,甚至现代浏览器里的 SVG fill 都行。

生成的代码会带 -webkit- 等前缀吗?

不会。从 2017 年开始,主流浏览器对 linear、radial、conic 已经不需要前缀了,继续加前缀只会让样式表变冗,所以输出保持简洁。

相关工具