实时预览
135°

点击轴线任意位置添加色标。双击色标可删除当前断点。

应用场景预览

实时预览

塑造鲜明的品牌视觉

在 Hero、卡片和按钮场景里直接验证当前渐变效果。

卡片组件叠层WCAG AA
交互按钮状态
5.24:1建议使用深色文字

常见问题解答

渐变会影响页面渲染性能吗?

现代浏览器通常会通过 GPU 高效渲染 CSS 渐变。真正需要注意的是,在低性能移动设备上,如果把复杂渐变作为大面积固定背景并叠加在多个区域,可能会带来轻微的重绘成本。

MoreColor 如何判断渐变上的文字可读性?

页面会根据当前色标推导一个代表性的背景色,再分别测试浅色文字和深色文字的对比度,并给出更适合的预览建议。它适合作为编辑阶段的快速判断,但不能替代最终界面中的完整实测。

这些渐变可以导出为 SVG 吗?

可以。线性渐变和径向渐变会导出为原生 SVG gradient 定义;圆锥渐变由于 SVG 本身没有原生 conic gradient 语法,因此会使用 foreignObject 包裹的方式输出。