免费在线 CSS 渐变色生成器
用可视化编辑器制作漂亮的渐变背景:选两个颜色、调整方向角度、一键复制 CSS 代码,内置多套预设渐变。
核心功能
双色渐变
自由选择起始与结束颜色,实时预览渐变效果。
角度控制
拖动滑块调整渐变方向,从 0° 到 360° 任意角度。
预设渐变
内置多套精选配色,一键套用,灵感枯竭时的救星。
代码即拿
实时生成标准 CSS 代码,点击复制直接用于你的网页。
三步搞定
1
选择颜色
点击起始/结束颜色块,选择你想要的两种颜色。
2
调整角度
拖动角度滑块,找到最顺眼的渐变方向。
3
复制代码
点击「一键复制」获取 CSS 代码,粘贴到你的项目里。
常见问题
生成的代码怎么用?
把复制的 background 声明粘贴到任意元素的 CSS 里即可,例如 body { 复制的代码 }。
支持多色渐变吗?
当前支持双色渐变。你可以复制代码后在 CSS 里自行添加更多颜色停止点,如 linear-gradient(90deg, red, orange, yellow)。
预设渐变可以修改吗?
可以。套用预设后,继续调整颜色或角度即可在预设基础上自定义。
颜色能直接输 HEX 值吗?
可以。在颜色选择器里输入 #RRGGBB 十六进制色值即可精确指定颜色。