加载中...
加载中...
支持线性渐变和径向渐变，自定义颜色节点与角度，实时预览，一键复制 CSS 代码
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
background: -webkit-linear-gradient(45deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
background: linear-gradient(135deg, rgb(99,102,241) 0%, rgb(139,92,246) 50%, rgb(236,72,153) 100%);
background: linear-gradient(135deg, hsl(239,84%,67%) 0%, hsl(258,90%,66%) 50%, hsl(330,81%,60%) 100%);
渐变颜色生成器支持线性与径向两种渐变类型，可自由添加颜色节点，通过滑块调整节点位置与渐变角度，实时预览效果，并提供10组快速预设与多格式CSS代码导出。
设计网页背景、按钮、卡片、Logo时，渐变是提升视觉质感的高频手段。本工具用可视化方式操作颜色节点，轻松搭配出自然的渐变过渡，实时预览让你所见即所得。
完成后可直接复制标准CSS代码或带-webkit-前缀的兼容代码，也支持RGB、HSL格式导出，适配不同项目的代码风格。
切换线性或径向渐变类型。
添加/删除颜色节点，用滑块调整节点位置与渐变角度。
实时预览效果，微调直到满意。
选择导出格式，复制CSS代码使用。
两者都支持。线性渐变按角度方向过渡，径向渐变从中心向外扩散，均可在工具中自由切换与调节。
可以。支持添加多个颜色节点并调整每个节点的位置，实现复杂的多色渐变效果。
工具提供标准CSS代码与带-webkit-前缀的兼容代码两种导出选项，旧版Chrome、Safari浏览器也能正常显示。