CSS 渐变生成器
可视化设置渐变并生成 CSS 代码
CSS 渐变生成器
渐变预览
渐变方向
从上到下 (to bottom)
颜色节点
生成的 CSS 代码
background: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
CSS 渐变是什么？
CSS 渐变可以在两个或多个颜色之间平滑过渡，是现代网页设计中非常常用的视觉效果。常用于按钮背景、页面头部、卡片背景等。
使用方法
- 选择渐变方向（上下、左右、对角线等）
- 添加多个颜色节点，调整位置百分比
- 实时预览渐变效果
- 复制生成的 CSS 代码直接使用
常见用途
- 按钮、卡片背景渐变
- 页面头部 Banner 渐变
- 品牌视觉设计
使用说明
调整参数后生成的 CSS 代码可以直接复制到样式表中使用，
无需手写 linear-gradient 语法。合理的渐变通常使用同色系或邻近色，
颜色数量控制在两到三种之间，过多颜色容易显得杂乱，反而影响界面质感。