构建线性或径向渐变,可调角度与色标,并输出干净的 CSS。
色标 1
色标 2
色标 3
通过实用的停止控制、实时预览和复制就绪输出构建线性和径向 CSS 渐变,以便团队可以在登陆页面、产品 UI 和营销资产上提供一致的视觉表面。
它允许您通过在一个集中的编辑器中调整角度、颜色停止和混合流程来组合线性或径向渐变。
它立即预览最终的背景结果并生成可粘贴到组件或设计令牌中的 CSS。
它有助于标准化产品和品牌团队的渐变配方,以便可以一致地重复使用一种经过批准的样式。
线性设置
角度:135度;停止:#0ea5e9 0%、#6366f1 60%、#111827 100%
径向设置
形状:以圆为中心;停止:#22d3ee 0%,#0f172a 85%
快速双色模式
linear; #34d399 -> #059669; angle 90deg
线性 CSS
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 60%, #111827 100%);
径向 CSS
background: radial-gradient(circle at center, #22d3ee 0%, #0f172a 85%);
回退说明
先提供纯色后备值,再声明渐变规则以兼容旧渲染环境。
颜色停止顺序不一致
确保停止百分比从开始到结束增加而不重叠。
渐变对比度无法访问
测试整个渐变表面的文本对比度,而不仅仅是一个停止。
方向出现反向
在需要时重新检查角度方向和交换停止顺序。
大型显示器上的可见条带
添加额外的中间停止点并避免颜色之间突然跳跃。
CSS 渐变生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
我应该选择线性渐变还是径向渐变?
使用线性作为定向表面,使用径向作为聚焦或聚光效果。
有多少个色标理想吗?
从两个或三个停止开始,然后仅在转换需要更精细控制时添加更多。
我可以重复使用输出作为设计令牌吗?
是的。将生成的 CSS 字符串存储在令牌文件中,以便跨组件使用一致。
渐变会影响性能吗?
对于典型 UI 通常不会,但在低端设备上测试昂贵的分层效果。