渐变会影响页面渲染性能吗？
现代浏览器通常会通过 GPU 高效渲染 CSS 渐变。真正需要注意的是，在低性能移动设备上，如果把复杂渐变作为大面积固定背景并叠加在多个区域，可能会带来轻微的重绘成本。
实时预览
135°
点击轴线任意位置添加色标。双击色标可删除当前断点。
应用场景预览
实时预览
塑造鲜明的品牌视觉
在 Hero、卡片和按钮场景里直接验证当前渐变效果。
卡片组件叠层WCAG AA
交互按钮状态
5.24:1建议使用深色文字
常见问题解答
tobecolor 如何判断渐变上的文字可读性？
页面会根据当前色标推导一个代表性的背景色，再分别测试浅色文字和深色文字的对比度，并给出更适合的预览建议。它适合作为编辑阶段的快速判断，但不能替代最终界面中的完整实测。
这些渐变可以导出为 SVG 吗？
可以。线性渐变和径向渐变会导出为原生 SVG gradient 定义；圆锥渐变由于 SVG 本身没有原生 conic gradient 语法，因此会使用 foreignObject 包裹的方式输出。
渐变有哪些不同类型？
CSS 中主要有三种类型的渐变：线性渐变、径向渐变和圆锥渐变。线性渐变沿直线过渡颜色。径向渐变从中心点向外过渡颜色。圆锥渐变围绕中心点过渡颜色。