渐变色生成器让你轻松创建精美的CSS渐变效果。支持线性渐变、径向渐变和圆锥渐变三种类型，可视化调整颜色节点、角度和位置。内置多套精选配色预设，一键应用。随机生成功能帮你发现意想不到的配色方案，即时预览效果并复制CSS代码。
三种CSS渐变类型详解
线性渐变（linear-gradient）：沿直线方向过渡，可设置任意角度；径向渐变（radial-gradient）：从中心点向外扩散，常用于光晕效果；圆锥渐变（conic-gradient）：围绕中心点旋转，适合饼图和色轮。
颜色节点调整技巧
- 位置百分比决定颜色过渡的起止点
- 相邻两个颜色位置相同可创建硬边界
- 添加多个颜色节点制作复杂渐变
- 使用透明色（transparent）实现渐隐效果
渐变应用场景
渐变可用于页面背景、按钮悬停效果、卡片边框、文字填充（配合background-clip: text）、遮罩层、加载动画等。相比图片背景，CSS渐变文件体积小、可无限缩放且易于修改。
FAQ
Q: 如何创建多色渐变？
A: 点击「添加颜色」按钮可以增加颜色节点（最多5个）。每个颜色节点可独立设置颜色值和位置百分比，通过拖动滑块调整过渡效果。位置相近的颜色会产生平滑过渡，位置相同则形成硬边界。
Q: 渐变角度怎么理解？
A: 线性渐变的角度以12点钟方向为0度，顺时针增加。90deg是从左到右，180deg是从上到下。可以输入任意角度值，工具会实时预览效果。
Q: 如何用渐变实现文字填充效果？
A: 设置背景渐变后，添加CSS属性：background-clip: text 和 -webkit-background-clip: text，再设置 color: transparent，即可让渐变作为文字填充色显示。