01
何时使用此工具
使用此工具可制作双色网页背景或卡片强调色。选择起始色和结束色、线性或径向类型以及角度，即可同时获得预览和 CSS。
渐变生成器
通过实时预览生成线性渐变或径向渐变代码。
渐变生成器
浏览器端生成的结果，用于规划与参考。
使用前的检查事项
02
结果如何生成
线性模式会根据输入角度创建 linear-gradient；径向模式会创建圆形 radial-gradient。浏览器会在两个色标之间渲染中间颜色。
03
示例与解读
将起始色设置为 #3366FF，结束色设置为 #FF6655，角度设为 90 度用于从左到右的背景声明。将其复制到真实组件后，重新检查放在上方的任意文本对比度。
04
范围与限制
该生成器使用两个色标，无法消除浏览器之间的颜色插值差异。请在完整编辑器中添加复杂色标、alpha 过渡或宽色域颜色。
常见问题
如何将渐变生成器中的颜色移动到其他应用？
使用结果下方的复制按钮复制 CSS、HEX 或 HSL 文本。确认目标应用解释相同的颜色格式。
渐变生成器中的屏幕颜色会与打印一致吗？
不会自动匹配。发光 RGB 屏幕与反光纸张和墨水使用不同的色域和混色模型，因此仍需打印配置文件和打样。
我可以仅凭渐变生成器批准一个设计 token 吗？
先把它作为候选项，再在真实背景、深色模式、交互状态和文本对比度下测试，然后再命名并批准 token。