构建您的渐变集
选择基本类型,定义最多四个颜色停止点,然后生成一系列可用的变体。多余的空白停止点将被安全忽略。
推荐导出
推荐结果反映了您选择的主要类型。下方的库卡片使用相同的停止点数据扩展出其他方向和样式。
6
库变体
整数 %
停止点舍入
渲染在不同浏览器之间可能略有不同,大面积的锥形渐变在某些显示器上可能会出现色带。导出的停止点位置被限制在 0 到 100 之间,并四舍五入为整数百分比,以确保 CSS 的可预测性。
渐变库
并排比较生成的变体,然后复制适合您布局的版本,无需手动重建停止点。
工作原理
生成器获取您激活的颜色停止点,清理每个值,并构建基本渐变字符串。然后它会创建一组相关的角度、径向位置和锥形旋转,以便您在不更改底层调色板的情况下查看实际的替代方案。
仅使用有效的十六进制颜色。跳过空白的可选颜色。仅在数据已经有效时才对停止点位置进行排序;如果停止点顺序倒置,页面将标记问题而不是默默更改您的输入。这使导出的 CSS 与您输入的内容保持一致。
复制操作首先尝试 Clipboard API,必要时回退到临时文本区域。如果无法复制,CSS 将保留在可选择的代码块中,因此仍有可靠的导出路径。