渐变Gradient
你可能会说
背景别用纯色，让颜色从蓝慢慢过渡到紫。
渐变是一种让两个或多个颜色在指定方向或范围内连续过渡的视觉效果线性渐变适合形成方向感，径向渐变可把注意力聚到一个区域，例如产品页的背景光晕。颜色感受会随明度、面积和品牌而变化；文字覆盖在渐变上时要检查整段区域的对比度，并准备可读的纯色回退。
你可以这样告诉 AI Agent
请保留 Hero 蓝紫渐变，但检查标题可能覆盖的每个区域，调整色阶、遮罩或文字位置确保可读，并提供纯色回退。不要把同一渐变铺满全页；在深浅模式和窄屏换行下重新验收。
什么时候用
- 线性渐变做 Hero 背景：方向感带来向前的活力
- 径向渐变做聚焦：光晕把视线聚到主体上开始
- 双色调 / 多色：撞色渐变适合活动页和年轻品牌，能带来更鲜明的潮流感
- 同色系深浅：可用于 卡片 Card 或背景营造层次；先检查文字与状态的对比度，不把“高级感”当结果保证
什么时候不用
- 将高饱和对比渐变用于正文背景：可能干扰文字阅读夏日活动今天开始，登录后即可领取奖励
- 文字叠在渐变上未验证对比度：不同区域可能难以辨认会员权益说明
- 渐变方向和色系缺少规则：会削弱页面的视觉一致性
- 一个页面多处使用渐变：视觉重点难以区分
组成结构 · Anatomy
⟶
渐变从它开始
线性渐变的角度，决定流动感
中途的停靠色，能做三色以上
渐变到它结束
常见变体 · Variants
线性渐变Linear
Hero 背景，方向感带来活力
径向渐变Radial
聚焦主体，营造光晕氛围
双色调Duotone
年轻潮流的品牌活动页
同色系深浅Tonal
想保持克制、又需要轻微层次时
典型使用场景
Hero 区大背景
品牌活动页
图标与头像点缀
消息
＋
林
林小满 把终稿发你了
10:24
✦
灵感订阅 本周精选已更新
09:02
卡片微渐变底色
本月活跃用户
12,408
↑ 8.2% 较上月
平均停留时长
6分42秒
↑ 3.1% 较上月
延伸阅读 · 权威出处
快速练习