程序员 / 快速工具

CSS 渐变生成器

通过实时预览、角度控制和可复制代码，生成双色线性或径向 CSS 渐变。

● 仅在浏览器本地处理

实时预览修改设置，预览和代码会同步更新。

可复制的 CSS

background: linear-gradient(135deg, #FF7A59 0%, #4F46E5 100%);

使用说明如何使用 CSS 渐变生成器

通过实时预览、角度控制和可复制代码，生成双色线性或径向 CSS 渐变。

示例输入

from=#FF7A59
to=#4F46E5
angle=135

预期结果

background: linear-gradient(135deg, #FF7A59 0%, #4F46E5 100%);

结果说明

CSS 渐变生成器的计算范围

无需手写渐变语法即可生成双色 CSS 背景。选择线性或径向渐变，设置两个 HEX 颜色、调整线性角度，在实时预览中核对效果，再复制一条规范化的 background 声明。

线性渐变沿直线轴混合颜色，因此使用角度控制；径向渐变从中心按圆形向外扩散，所以选择径向模式后角度会自动停用。

CSS 把 0deg 定义为向上并按顺时针旋转：90deg 向右、180deg 向下、270deg 向左。复制的代码会保留控件中显示的准确整数角度。

本页只生成位于 0% 与 100% 的两个色标，不编辑多色标、锥形、重复、图片导出、色彩空间或旧版前缀渐变；需要这些能力时可在复制代码后继续手动扩展。

生成的代码能直接粘贴到样式表吗？

可以。结果是一条完整的 background 声明，使用标准 linear-gradient() 或 radial-gradient() 语法，可直接放入 CSS 规则、style 区块或组件样式。

为什么径向渐变不能调整角度？

本工具生成从中心向外扩散的圆形径向渐变，不沿线性轴变化，因此角度在这个简化的径向模式中不起作用。

工具会上传颜色或 CSS 代码吗？

不会。预览渲染、HEX 校验与 CSS 生成都在浏览器本地完成，页面不会上传输入的颜色或生成的声明。

匿名反馈

工具有问题，或有更好的优化建议？请告诉我们。每条反馈都会查看，我们会在收到后的 2 天内开始处理可执行的优化，并持续提升工具的可靠性与使用体验。