渐变
Gradient
初级通用渐变（Gradient）是在同一片区域内，让颜色或透明度按位置逐步变化的视觉效果。它能让背景形成层次，也能让文字下方的图片逐渐变暗，方便你放上清晰可读的标题。
你可能会说：「把首页首屏背景做成从左边的深蓝慢慢过渡到右边的浅蓝，别像两块颜色拼在一起。」
动手看看山间民宿的封面图
渐变终点颜色
拖动覆盖范围，再切换终点颜色，看看山景和标题怎么一起变化。渐变让图片逐步变暗或变亮，不必用一整块纯色挡住画面。
要点一个渐变由哪些设置决定？
- 1
先说清变化发生在哪儿
渐变可以沿一条方向变化，比如从左到右；也可以从中心向外扩散。你只说“做个渐变”，AI 还得猜方向。给首屏背景提需求时，说明起点和终点在哪儿，结果会更可控。
- 2
颜色节点决定过渡路径
渐变不一定只有两种颜色。我们可以在中间加一个颜色节点，控制颜色在什么位置开始变化。比如背景从深蓝经过紫色到浅蓝，和深蓝直接过渡到浅蓝，看起来会不同。
- 3
文字可读性要单独检查
颜色变化可能让同一行文字在一端清楚、另一端难看清。做带标题的图片背景时，你可以让靠近文字的区域逐渐变暗，再检查文字经过的每个位置，而不只看背景是否好看。
容易混淆的地方
渐变说的是颜色或透明度随位置变化；渐入渐出说的是元素随时间出现或消失。把整张图统一调低透明度，也不是从一端逐渐变透明。你如果想让标题后方暗、另一侧保留原图，就用透明度渐变；如果想让整张图一起变淡，就调透明度。
什么时候用
适合用
- 做网站首屏时，让背景从品牌主色过渡到较浅的颜色，给标题留出清楚的阅读区域。
- 在图片上叠一层从下往上逐渐透明的深色，让底部的说明文字更容易看清。
- 做数据图表的色带时，用连续的颜色变化表示数值大小，并配上刻度帮助用户判断。
不适合用
- 后台表格只想区分相邻行时，用轻微的纯色底或分割线就够了，渐变不会让行边界更明确。
- 页面只想明确区分“成功”和“失败”两种状态时，用两种固定颜色并配合文字标签，比连续渐变更直接。
- 需要展示产品实物的颜色和纹理时，用真实图片；渐变不能代替照片提供这些信息。
练一练选一个答案，看看解释
你在做一个旅行 App 的景点详情页：顶部照片下方要放白色标题，同时尽量保留照片上半部分。你会让 AI 怎么处理？
让 AI 帮你做复制给 AI Agent 直接用
请给景点详情页的顶部照片叠加一层从底部深色到上方透明的渐变，让底部白色标题始终清楚，上半部分尽量保留原图。请说明渐变方向、颜色节点位置，并检查窄屏下标题换行后的可读性。