CSS 渐变生成器
可视化设计渐变并复制 CSS。
用两种颜色、一个角度和一个色标位置创建线性或径向渐变。调整时实时预览，完成后复制 CSS 声明即可。
135°
100%
起始颜色
结束颜色
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);如何制作渐变
- 选择线性或径向作为渐变类型。
- 用取色器选择两种颜色。
- 用滑块调整角度和色标位置。
- 复制生成的 CSS 并粘贴到样式表中。
常见问题
线性渐变和径向渐变有什么区别？
线性渐变沿直线朝一个方向过渡，而径向渐变从中心点向外扩散。
生成的代码可以用在内联样式里吗？
可以。把 background 声明复制到任何 CSS 规则或 style 属性中即可。
颜色会离开我的浏览器吗？
不会。生成器完全在你的设备上运行，没有任何上传。