01
先认清角度属于哪种渐变
线性渐变的 0 度向上、90 度向右；锥形使用独立的起始角。径向没有角度，而是选择圆形或椭圆形与中心位置。
HTML / CSS / 前端代码
CSS 渐变生成器实时预览与复制
调整色标与方向，预览和 CSS 声明会同步更新；旧结果不可复制。
CSS 渐变生成器
色标
色标 1
色标 2
CSS 声明
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);颜色与 CSS 只保留在当前浏览器标签页，不会上传。
渐变选项
CSS 已生成，可以复制。
做页面背景时，手写三四个色标很难预判中间的过渡。CSS 渐变生成器把色标位置和实际画布放在一起，能直接看出柔和过渡与同位硬边的区别。它也是一个可精确调位的渐变色生成器。
无论是按钮、卡片还是环形装饰，这个 CSS 渐变生成器都能用同一组颜色对照线性、径向和锥形效果，不必在样式表里反复改函数名。
为什么使用 CSS 渐变生成器
相同颜色切换形状，精确色标始终可见。
一组色标比较三种形状
CSS 渐变生成器在切换线性、径向、锥形时保留颜色和百分比；角度、形状或中心点控件只在对应模式出现，预览差异一眼可见。
颜色或位置出错时不复制旧代码
拖动色标或输入百分比后，CSS 渐变生成器同步刷新画布与声明。若 HEX 值无效，旧结果会变淡，复制按钮立即禁用。
三个容易忽略的设置
02
用同位色标画出清晰边界
拖动手柄或直接输入位置百分比。两个色标落在同一位置时会形成硬边；输出按位置排序，同位时保留编辑顺序。
03
观察结果是否已更新
默认自动生成；关闭后可以连续调整，再按 Ctrl/Cmd + Enter 生成。任何参数变化都会暂时禁用复制，避免带走过期 CSS。
形状、色标和代码一处完成
三种 CSS 渐变类型
线性做方向过渡，径向做中心光晕，锥形做环绕色轮；切换时沿用色标。
2 到 8 个可编辑色标
每个色标均可改六位 HEX 颜色、透明度与位置，也可以直接拖动色条手柄。
可直接粘贴的声明
复制标准 background-image 声明；带透明度的颜色输出为 rgba()，与画布预览一致。
输入范围和明确边界
- 色标至少两个、最多八个
- 只有两个色标时不能删除；删除其他色标前显示预览与数量，确认后还可以撤销一次。
- 颜色只接受六位 HEX
- 输入 #RRGGBB 并单独设置透明度。无效颜色或超出 0–100 的位置会报错并禁用复制；颜色格式互转请用专门工具。
- 只输出单层标准 CSS
- CSS 渐变生成器不读取图片或已有 CSS，也不叠加多层背景，不导出 Tailwind、PNG 或旧浏览器前缀。
- 预览不等于文字可读性检查
- 背景两端明暗可能不同；要在渐变上放文字时，仍需单独检查实际位置的对比度。
CSS 渐变生成器常见问题
CSS 渐变怎么设置角度？
线性模式填写 0–360 度，0 度向上、90 度向右。CSS 渐变生成器在锥形模式另设起始角，径向模式改用中心点。
线性渐变和径向渐变有什么区别？
线性沿指定方向过渡；径向从中心向外扩散。切换模式时色标保留，便于直接比较。
CSS 渐变如何添加多个颜色？
点“添加色标”，新色标插入最大空隙的中点。随后可改颜色和位置，总数最多八个。
为什么色标位置相同会有清晰边界？
两个颜色在同一百分比处相接时没有过渡距离，浏览器便画出硬边。把位置稍微错开即可恢复渐变。
生成的 CSS 应该粘贴到哪个属性？
复制的完整代码已经带 background-image:，直接粘贴进目标选择器即可，不需要再额外套一层 background。
遇到没有覆盖的渐变边界？