结果仅供参考，可能包含错误。请自行核实重要信息。使用本工具风险自负。
这个工具能做什么
CSS 渐变生成工具用两种颜色生成一条 background 声明。选择线性可沿任意角度的直线过渡，选择径向则从中心以圆形向外扩散。调整控件时预览会实时更新，输出框中是可以直接粘贴的一行代码，例如 background: linear-gradient(90deg, #3b82f6, #8b5cf6);。
在线性渐变中，角度决定方向：0deg 从下到上，90deg 从左到右，180deg 从上到下。径向渐变会忽略角度并使用 circle，因此第一种颜色位于中心。所有现代浏览器都支持这两种形式，无需厂商前缀，生成的代码可以直接使用。
适用场景
- 为 hero 区域或号召性用语（CTA）按钮添加柔和的双色背景。
- 用 CSS 取代渐变背景图片，让页面少加载一个文件。
- 在把品牌配色纳入设计系统之前，先并排比较几组颜色。
- 在 logo 或插图后面制作柔和的径向光晕。
示例
输入
类型：线性
角度：90
颜色：#3b82f6, #8b5cf6输出
background: linear-gradient(90deg, #3b82f6, #8b5cf6);关于这个工具的问题
如何添加第三种颜色？
在函数的颜色列表中用逗号分隔加上它：linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899)。你还可以为每种颜色指定位置，例如 #8b5cf6 40%，以控制过渡发生的位置。
渐变上的文字还能保持可读吗？
用颜色对比度检测工具分别检查文字颜色与渐变两端的对比度。如果有一端不达标，就把它调暗，或在文字后面加一层半透明遮罩。
渐变可以用作边框或文字填充吗？
可以，但需要额外的 CSS。对于文字，把渐变设为 background，再加上 background-clip: text 和 color: transparent。对于边框，border-image 接受同样的渐变函数。
为什么我的渐变出现明显的色带？
当两种相近的颜色被拉伸到很大的区域时，就会出现色带。可以选用差异更大的颜色、缩小区域，或添加一个中间色标，让每一级的变化更小。
这个工具免费吗？
是的，完全免费。无需注册或电子邮箱。结果直接显示在本页。
如何获取结果？
在此页面使用工具即可查看结果，无需通过电子邮件接收。