CSS Gradient Generator
Generate CSS linear and radial gradient code visually
Live preview, purely client-side
Gradient Settings
135°
Live Preview
Generated CSS Code
Standard
-webkit- Prefix
-moz- Prefix
CSS渐变生成器介绍
本工具帮助您快速生成CSS渐变代码，支持线性渐变（linear-gradient）和径向渐变（radial-gradient）。通过直观的颜色选择器和方向控制，实时预览渐变效果，一键复制包含浏览器前缀的完整CSS代码。
渐变类型说明
| 类型 | 语法 | 说明 |
|---|---|---|
| 线性渐变 | linear-gradient(angle, color1, color2) | 沿指定角度方向的颜色过渡 |
| 径向渐变 | radial-gradient(circle, color1, color2) | 从中心向外的圆形颜色扩散 |
角度与方向
CSS线性渐变的角度以顺时针方向计算：0deg表示从下到上，90deg表示从左到右，180deg表示从上到下，270deg表示从右到左。工具提供了8个常用方向的快捷按钮，也支持0-360度自由调节。
常见问题
生成的代码兼容哪些浏览器？
标准语法兼容所有现代浏览器。同时提供的-webkit-和-moz-前缀版本可以兼容Safari 5+、Firefox 3.6+等旧版浏览器。
可以添加更多颜色节点吗？
当前版本支持双色渐变。如需多色渐变，可以在生成的代码中手动添加更多颜色值，例如：linear-gradient(135deg, #667eea, #764ba2, #f093fb)。
渐变可以用在哪些CSS属性上？
渐变本质上是background-image的值，可用于background或background-image属性。也可以用在border-image、mask-image等支持图像值的属性上。