设置
#FF512F0%
#DD2476100%
实时预览
CSS 输出
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);

CSS 渐变生成器

直观地创建漂亮的 CSS 渐变。选择线性、径向或圆锥样式。

如何使用

1

选择类型

选择线性、径向或圆锥渐变类型,并根据需要调整角度。

2

添加颜色

添加色标,选择颜色,然后拖动滑块将其完美定位。

3

复制 CSS

预览您的渐变并点击“复制 CSS”以立即在您的项目中使用。

常见问题

CSS 渐变有哪些浏览器支持?

所有现代浏览器都支持 CSS 渐变(线性和径向)。圆锥渐变也在所有主要的常青浏览器(Chrome, Firefox, Safari, Edge)中得到广泛支持。

我可以添加多少个色标?

为了保持 UI 简洁,此工具允许您添加最多 5 个色标,但 CSS 支持无限个色标。您可以在此处生成基本代码,如果需要,可以手动添加更多。

我可以使用透明颜色吗?

目前,此工具使用标准颜色选择器,通常输出 HEX 值。对于透明度 (RGBA),您可以手动编辑生成的 CSS 代码,将 HEX 代码替换为 rgba() 值。

这个工具是免费的吗?

是的,我们的 CSS 渐变生成器完全免费使用。无需订阅,无需注册。

我可以保存我的渐变吗?

目前,我们不支持保存到帐户,但您可以复制 CSS 代码并将其保存在您的项目文件中。

线性和径向有什么区别?

线性渐变沿直线(例如,从上到下)过渡颜色,而径向渐变从中心点向外辐射。

如何使用生成的 CSS?

只需从 CSS 输出框中复制代码并将其粘贴到样式表的“background”或“background-image”属性下即可。

我可以调整线性渐变的角度吗?

是的,使用“旋转角度”滑块或输入框以度为单位设置方向(例如,从左到右为 90 度)。

它支持旧版浏览器吗?

生成的代码是标准 CSS3。 对于非常旧的浏览器(如 IE9),您可能需要供应商前缀,但此工具当前不会自动添加这些前缀。

什么是圆锥曲线梯度?

圆锥渐变围绕中心点旋转颜色,如饼图或色轮。 它对于创建有趣的模式和图表很有用。