CSS 渐变生成器
选择两种颜色与角度，生成线性渐变 CSS。
渐变类型
渐变设置
颜色节点
0%
100%
🎨 预设渐变
Purple Dream
Ocean Blue
Sunset
Fresh Mint
Fire
Cool Sky
Rainbow
Calm
💡 使用说明
什么是 CSS 渐变？
CSS 渐变允许在两个或多个指定颜色之间创建平滑过渡，无需使用图片即可实现丰富的视觉效果。
渐变类型
- 线性渐变: 线性渐变：颜色沿着一条直线过渡
- 径向渐变: 径向渐变：颜色从一个中心点向外辐射
功能特点
- 可视化渐变编辑
- 支持多个颜色节点
- 线性和径向渐变
- 实时预览效果
- 一键复制 CSS 代码
- 预设渐变方案
应用场景
- 网页背景设计
- 按钮和卡片渐变效果
- 标题和文字渐变
- UI 组件美化
使用技巧
- 使用 2-4 个颜色节点效果最佳
- 相邻颜色对比不宜过强
- 径向渐变适合创建聚光灯效果
- 线性渐变可设置任意角度
渐变预览
CSS 代码
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);格式转换
CSS
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Inline Style
style="linear-gradient(90deg, #667eea 0%, #764ba2 100%);"颜色节点
#667EEA
位置: 0%
#764BA2
位置: 100%