Gradient

以柔和的多层渐变丰富背景与占位画面，提供六种配色与可缩放的形变效果。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于已内置的装饰性渐变图形或头像占位。艺术配色不作为普通 UI 的主题颜色；页面表面和文字仍使用语义颜色。

import { Gradient } from '@snowui-design-system/components';

属性	类型	默认值	示例	描述
`variant`	`GradientVariant`	`—`	`variant={value}`	选择 Frame 200 从左到右对应的六种固定配色
`seed`	`string \| number`	`—`	`seed="Example"`	仅在 `as="avatar-image"` 且未显式传 `variant` 时用于稳定选择六种配色；配色名可直接命中对应 variant
`size`	`number \| string`	`—`	`size="Example"`	同时设置宽高；优先级高于 `width` / `height`
`width`	`number \| string`	`—`	`width="Example"`	宽度；数字值按 px 处理
`height`	`number \| string`	`—`	`height="Example"`	高度；数字值按 px 处理
`radius`	`number \| string`	`—`	`radius="Example"`	外部裁切圆角；数字值按 px 处理
`motion`	`boolean`	`—`	`motion`	控制四个 SVG 有色图层是否常驻运行；Avatar 为 false 时仍会在 hover 期间按需运行水波形变，不影响多色 Overlay 默认行为：普通 Gradient 为 `true`；`as="avatar-image"` 为 `false`。
`avatarHoverActive`	`boolean`	`—`	`avatarHoverActive`	由 Avatar 宿主控制头像变体的 hover 艺术色反馈；未传时使用组件自己的交互检测，非头像变体不使用此控制。
`decorative`	`boolean`	`true`	`decorative`	装饰图默认隐藏于无障碍树；设为 `false` 时应同时提供 `aria-label`