用渐变背景替代纯色可高效提升视觉丰富度；线性渐变适合强调方向感，径向渐变聚焦核心内容，射线渐变用于封面页；双色单色渐变最稳妥，对比色需降饱和或加灰阶缓冲；图文混排时应加半透底衬、蒙版或低透明度纹理；CSS原生渐变性能好，但移动端慎用高角度多节点渐变。
直接用渐变背景替代纯色，是提升页面视觉丰富度最高效的方式之一。它不增加元素数量，却能立刻增强层次、引导视线、强化情绪，而且实现成本低、适配性好。
选对渐变类型，匹配页面功能
线性渐变适合强调方向感和流动感，比如首页 Banner、导航区或长文案区块——135°对角线渐变能自然引导用户从左上标题滑向右下按钮；径向渐变更适合聚焦核心内容，如登录框、价格卡片或产品主图区域，把视觉中心“托”出来；射线渐变（即“从中心”放射）则常用于封面页或章节页，让文字或图标成为视觉落点。
控制颜色数量与跨度，避免干扰信息
双色渐变最稳妥，推荐使用同一色相下明度或饱和度变化的单色渐变（如#2A5CAA → #4A7DBB），过渡自然、专业感强；若用对比色（如蓝+橙），务必降低其中一色的饱和度或加入灰阶缓冲，否则容易抢走文字注意力；多色渐变慎用，仅建议在品牌视觉页、活动主KV等强调设计感的场景中出现，且需确保前景文字有足够对比度。
结合透明度与叠加方式，提升可读性与质感
在图文混排区域，不要让渐变直接“顶”在文字下方。可行做法包括：给文字层加浅色半透底衬（如白色+85% opacity）、用深色渐变+浅色文字+顶部蒙版（黑→透明线性渐变，位置0%–40%）、或在渐变背景上叠加一层极低透明度（5%–10%）的噪点/纹理图层，削弱机械感，增强真实质感。
注意响应式与性能细节
CSS 原生渐变（linear-gradient / radial-gradient）无需加载图片，体积为零，硬件加速支持好；但避免在移动端大量使用高角度多节点渐变（如linear-gradient(179.9deg, ...)），部分低端安卓机型渲染可能卡顿；建议用 CSS 变量统一管理主渐变色值，便于品牌色更新时全局替换。
