什么是渐变生成器？
可视化 CSS 渐变生成器，支持线性、径向和键形渐变，可添加无限色标。实时调整角度、位置和颜色，一键复制 CSS 代码。
在线性、径向和锥形渐变之间选择，把角度设在 0° 到 360° 之间，按需添加任意多个色标，并为每个色标单独设置透明度以做透明叠加。可以从日落、Instagram、海洋等精选预设入手，再细调颜色。径向渐变可选择圆形或椭圆形状以及范围关键词，并把混色切换到 OKLab 或 OKLCH 获得更顺滑的现代插值，或套用缓动曲线。打开「动画」即可得到一段可直接粘贴的 @keyframes 循环，做成会动的背景。输出是纯 CSS，可直接放进样式表、Tailwind 配置或设计工具。
使用方法
- 第一步 — 选择渐变类型（线性、径向或锥形），使用角度滑块或预设按钮设置方向或角度。
- 第二步 — 点击渐变条添加色标，通过拖拽或输入精确值来调整每个色标的颜色和位置。
- 第三步 — 实时预览渐变效果，然后将生成的 CSS 代码复制到剪贴板，或下载为 CSS 文件。
何时使用
- 做网站首屏、按钮、卡片背景,不用打开 Photoshop。
- 把品牌色统一应用到网页、邮件和 PPT 上。
- 向开发交付前,先把 CSS 效果跑一遍样。
结果
假设你想做一个日落主题的首屏背景。选择 135° 线性渐变，0% 设为橙色、50% 设为玫红、100% 设为紫色，然后把 CSS 粘贴进样式表就行了。
常见问题
- 线性、径向、圆锥渐变有什么区别?
- 线性是沿一条直线按设定角度过渡颜色。径向从中心向四周扩散,像太阳光的效果。圆锥是绕一个圆心扫一圈,常用于做饼图或色环。
- 色标最多能加多少个?
- 没有硬性上限。大多数设计用两到四个色标就够了。超过五六个之后,颜色之间相互融合,反而显得脏,失去原本想要的清晰过渡。
- 渐变在深色背景上为什么会有色带?
- 相邻颜色的明度太接近时就容易出现色带。拉大色标之间的对比、把颜色插值切换成 OKLCH 或 OKLab(感知更均匀),或者在 CSS 里叠一层细微噪点都可以改善。
- 生成的渐变能在 Figma 或 Sketch 里用吗?
- CSS 代码本身不能直接粘进去,但色值和百分比位置是一一对应的。把每个色标的 hex 值和位置抄到设计工具的渐变编辑器里就行。
- 角度参数到底起什么作用?
- 线性渐变中,0° 朝上,顺时针旋转——90° 是从左到右,180° 是从上到下。圆锥渐变中,角度决定颜色环从哪个位置开始扫。