CSS 渐变生成器
最多混合 8 个色标，做出线性、径向或锥形渐变——拖拽、微调、复制生产级代码。
如何使用渐变生成器
- 选择渐变类型：线性、径向或锥形。
- 点击渐变条添加色标；沿渐变条拖拽色标即可调整位置。
- 选中色标后可修改其颜色、不透明度与精确位置（最多 8 个）。
- 调整角度（线性/锥形）、形状（径向）或中心点，直到效果满意。
- 复制 CSS background 声明，或切换到 Tailwind 标签页获取工具类。
关于本渐变生成器
CSS 渐变是由浏览器生成的图像：linear-gradient 沿直线绘制，radial-gradient 从中心点向外辐射，conic-gradient 像色轮一样绕中心扫掠。它们都接受两个或更多带可选位置的色标。手写渐变——尤其是多色标或带 rgba 透明度时——既慢又容易出错。
本生成器会在您拖拽色标、旋转角度或移动中心点时实时渲染渐变。从 10 个精选预设（日落、海洋、糖果、彩虹……）出发，做出属于您的渐变。输出是一条在所有现代浏览器中都可用的 background 声明；Tailwind 标签页则用任意值语法包装同一渐变，适配 utility-first 工作流。
渐变常见问题
最多可以添加多少个色标？
最多 8 个。点击渐变条任意位置即可在该处插入新色标——颜色会自动从相邻色标插值。拖拽可调整位置，选中后可编辑颜色与不透明度，用「删除色标」按钮移除（至少保留 2 个）。
线性、径向与锥形渐变有什么区别？
线性渐变沿给定角度的直线过渡颜色；径向渐变从中心点以圆形或椭圆向外扩散；锥形渐变绕中心点旋转颜色（类似饼图或色轮），并支持 from 起始角度。
如何制作带透明度的渐变？
选中任意色标，降低其不透明度滑杆。生成器会为该色标输出 rgba() 颜色，从而可以渐隐为透明，或叠加在下方的背景图/背景色之上。
如何反转颜色方向？
点击「反转」按钮——它会镜像所有色标位置（0% 变 100%，依此类推），在不改变角度的情况下翻转渐变。线性渐变也可以直接把角度旋转 180°。
生成的值可以用作 background-image 吗？
可以。生成的值（linear-gradient(...)、radial-gradient(...) 或 conic-gradient(...)）在 CSS 中是