background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
点击"线性渐变"或"径向渐变"按钮选择渐变类型。线性渐变沿直线方向变化，径向渐变从中心向外扩散。
使用颜色选择器设置渐变颜色，调整百分比控制颜色位置。点击"+ 添加颜色"添加更多颜色停靠点。
使用角度滑块调整渐变方向。0度是从下到上，90度是从左到右，135度是从左上到右下。
点击"复制CSS"按钮将生成的渐变代码复制到剪贴板，粘贴到您的CSS中使用。
CSS渐变是现代网页设计中常用的背景效果。通过本工具，您可以轻松创建各种渐变效果，无需记忆复杂的CSS语法。
使用相近的颜色创建柔和的渐变效果，使用对比色创建醒目的渐变。添加多个颜色停靠点可以创建彩虹效果。渐变常用于按钮背景、卡片背景、页面背景等。
现代浏览器都支持CSS渐变。对于旧版浏览器，可以设置纯色作为后备方案。
CSS渐变生成器可视化创建 linear-gradient 与 radial-gradient，自定义颜色停靠点与角度，实时预览并导出代码。我们的免费CSS渐变生成器适合按钮、卡片与页面背景。
相邻色做柔和过渡，对比色做醒目效果；多停靠点可出彩虹渐变。旧浏览器可加纯色后备。搭配颜色选择器选取精准色值。
预览与代码生成均在浏览器本地完成，不上传数据。
线性沿直线方向过渡，径向从中心向外圆形扩散，适用场景不同。
在CSS中0deg从下到上，90deg从左到右，135deg从左上到右下。
点击“+ 添加颜色”增加停靠点，分别设置颜色与位置百分比。
可以。点击“复制CSS”获得完整 background 声明。
现代浏览器均支持；为旧版可设置纯色 background 作为后备。
不会。全部在本地浏览器计算。
填0-100的百分比，表示颜色在该位置出现，排序后自动过渡。
不需要，完全免费。
可以，用 background-clip:text 配合渐变实现文字渐变效果。
还有CSS阴影生成器、取色器、CSS压缩工具等。
CSS渐变生成器可视化创建 linear-gradient 与 radial-gradient，自定义颜色停靠点与角度，实时预览并导出代码。我们的免费CSS渐变生成器适合按钮、卡片与页面背景。
相邻色做柔和过渡，对比色做醒目效果；多停靠点可出彩虹渐变。旧浏览器可加纯色后备。搭配颜色选择器选取精准色值。
预览与代码生成均在浏览器本地完成，不上传数据。
线性沿直线方向过渡，径向从中心向外圆形扩散，适用场景不同。
在CSS中0deg从下到上，90deg从左到右，135deg从左上到右下。
点击“+ 添加颜色”增加停靠点，分别设置颜色与位置百分比。
可以。点击“复制CSS”获得完整 background 声明。
现代浏览器均支持；为旧版可设置纯色 background 作为后备。
不会。全部在本地浏览器计算。
填0-100的百分比，表示颜色在该位置出现，排序后自动过渡。
不需要，完全免费。
可以，用 background-clip:text 配合渐变实现文字渐变效果。
还有CSS阴影生成器、取色器、CSS压缩工具等。
