渐变 CSS 生成器
可视化设计渐变背景，一键复制 CSS 代码
起始颜色
#667eea
结束颜色
#764ba2
选择渐变方向
⬆
上
⬅
左
➡
右
↘
右下
⬇
下
↗
右上
↖
左上
↙
左下
⬆ 上 (to top)
➡ 右 (to right)
⬇ 下 (to bottom)
⬅ 左 (to left)
↘ 右下 (to right bottom)
↗ 右上 (to right top)
↙ 左下 (to left bottom)
↖ 左上 (to left top)
实时预览
中间色标
添加色标
预设渐变方案
晚霞
海洋
极光
日落
薄荷
薰衣草
生成的 CSS 代码（点击代码块选中全部）
/* 实时预览，点击代码块即可全选 */
background
:
linear-gradient(
to right
,
#667eea
,
#764ba2
)
;
复制 CSS
💜 渐变 CSS 生成器 ·
返回工具集
· Made with