渐变生成器
可视化创建 CSS 线性与径向渐变，一键复制 CSS 代码。
100% 隐私保护——一切都在浏览器中运行
广告
使用方法
- 1
选择线性或径向，线性渐变还可设置 0°–360° 的角度。
- 2
设置每个色标的颜色，拖动滑块调整位置（0–100%）。
- 3
最多可添加八个色标，也可以删除不需要的色标。
- 4
复制生成的 CSS 代码，粘贴到样式表中使用。
示例
蓝到紫（默认）
输入
线性 · 135° · #3B82F6 0% → #8B5CF6 100%输出
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);三色径向渐变
输入
径向 · #F59E0B → #EF4444 → #8B5CF6输出
background: radial-gradient(circle, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);常见问题
线性渐变和径向渐变有什么区别？
线性渐变沿你设定的角度沿直线过渡颜色；径向渐变从中心向外呈圆形扩散。
生成的 CSS 兼容哪些浏览器？
所有现代浏览器都支持标准的 linear-gradient() 和 radial-gradient()，无需厂商前缀。
最多能使用多少个色标？
最多八个。每个色标有独立的颜色和 0%–100% 的位置滑块。