CSS渐变生成器

渐变预览

角度

生成的CSS代码

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

免费CSS工具 | 创建漂亮的渐变背景

点击"线性渐变"或"径向渐变"按钮选择渐变类型。线性渐变沿直线方向变化，径向渐变从中心向外扩散。

使用颜色选择器设置渐变颜色，调整百分比控制颜色位置。点击"+ 添加颜色"添加更多颜色停靠点。

使用角度滑块调整渐变方向。0度是从下到上，90度是从左到右，135度是从左上到右下。

点击"复制CSS"按钮将生成的渐变代码复制到剪贴板，粘贴到您的CSS中使用。

CSS渐变是现代网页设计中常用的背景效果。通过本工具，您可以轻松创建各种渐变效果，无需记忆复杂的CSS语法。

使用相近的颜色创建柔和的渐变效果，使用对比色创建醒目的渐变。添加多个颜色停靠点可以创建彩虹效果。渐变常用于按钮背景、卡片背景、页面背景等。

现代浏览器都支持CSS渐变。对于旧版浏览器，可以设置纯色作为后备方案。