← 返回工具列表

CSS渐变生成器

?

📖 CSS渐变生成使用指南

操作步骤
1
选择渐变类型

选择线性渐变或径向渐变

类型选择
2
添加颜色节点

点击添加多个颜色和位置

颜色节点
3
调整角度方向

拖动调整渐变的方向和角度

角度调节
4
复制CSS代码

复制生成的渐变CSS代码

复制代码
💡 拖动色条上的标记可实时调整渐变效果
使用场景
💻 网页背景

给网站做漂亮的渐变背景

🎨 按钮样式

给按钮添加渐变色提升质感

📱 APP界面

移动端界面渐变色设计

免费在线CSS渐变生成器,可视化创建线性渐变和径向渐变,实时预览效果,一键复制CSS代码。

渐变类型
90°
预览效果

background:

预设渐变

意见反馈