CSS 渐层产生器
使用此免费线上工具轻松制作漂亮的 CSS 渐层。支援线性与放射状渐层、多个颜色断点以及角度调整。
CSS 渐层产生器
使用此免费线上工具轻松制作漂亮的 CSS 渐层。支援线性与放射状渐层、多个颜色断点以及角度调整。
关于 CSS 渐变
输出标准 background 声明
线性渐变会使用您选择的角度，径向渐变会使用 circle 或 ellipse 形状。复制结果是一行 background 声明，可以直接粘贴进样式表。
颜色断点会按位置排序
您可以添加多个颜色断点、选择每个颜色，并将位置设在 0 到 100 percent 之间。生成的 CSS 会先按位置排序再合并断点，让渐变声明保持可预期。
三色背景：蓝、紫、粉红
选择线性渐变与 90°，依次设置 #2563eb 在 0%、#7c3aed 在 50%、#ec4899 在 100%。颜色从左向右变化；移动中间色标可改变紫色出现的位置。将这行声明粘贴到横幅或卡片的 CSS 规则中： background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
径向光晕：由亮色中心过渡至深色背景
选择径向渐变与 circle，设置 #fef3c7 在 0%、#f59e0b 在 35%、#0f172a 在 100%。这是中心发亮的不透明背景，不是透明叠图。移动琥珀色色标可调整过渡；改选 ellipse 可让形状随容器长宽延展： background: radial-gradient(circle, #fef3c7 0%, #f59e0b 35%, #0f172a 100%);
硬边分色：两个色标设在相同位置
选择线性渐变与 90°，保留两个色标并按此顺序设置：#0f172a 在 50%，接着 #f8fafc 也在 50%。相同位置会取消两色间的渐变，形成左右清晰的分界。两个色标一起移到 30% 即为 30／70 分色。这是单道分界，不是重复条纹： background: linear-gradient(90deg, #0f172a 50%, #f8fafc 50%);
常见问题
关于这个主题的常见疑问与实用解答。
支持哪些渐变类型？
支持线性与径向渐变，可完全控制角度、形状与颜色断点位置。
可以添加多个颜色断点吗？
可以，可添加任意数量的颜色断点并自定义位置，创建复杂的渐变效果。
生成的代码跨浏览器兼容吗？
是的，输出标准 CSS 渐变语法，适用于所有现代浏览器。
我的数据会被发送到服务器吗？
不会，渐变 CSS 生成完全在您的浏览器中进行。您的颜色选择与设置在本地处理，不会发送至任何服务器。