CSS 渐变生成器
可视化调节线性/径向渐变，实时预览并输出 CSS 代码
角度 90°
0%
100%
使用说明
CSS 渐变生成器让你可视化调节线性或径向渐变：拖动色标位置、增删颜色、调整角度，实时预览效果并自动生成对应的 CSS 代码，复制即用。
常用于设计按钮、背景、卡片的渐变配色。全部在浏览器本地生成，无需上传。
常见问题
Q 线性渐变和径向渐变有什么区别？⌄
线性渐变沿某个角度直线过渡（linear-gradient），径向渐变从中心向外辐射过渡（radial-gradient）。本工具两者都支持。
Q 可以加几个颜色？⌄
支持 2 到 6 个色标，每个色标可单独设置颜色和位置百分比，足以做出丰富的多色渐变。
Q 生成的 CSS 怎么用？⌄
直接复制 background: ... 这行，粘贴到元素的样式里即可。现代浏览器都支持，无需前缀。