Digital / Web UI
极光渐变
一种受极光启发的柔和氛围渐变，用来在不依赖复杂插画的情况下建立空间感。
Au
适用场景
- Hero 背景
- 页面分区
- 空状态
可调参数
- color stops
- grain
- contrast
- field scale
- dark base
AI Prompt
生成极光渐变背景：柔和流动色场、轻噪点、足够留白和清晰前景对比。
Tailwind 思路
在深色底上叠加多个 radial-gradient，再加轻微噪点伪元素。
性能提醒
大面积静态渐变通常安全；低端设备避免动画模糊色场。
CSS
.aurora-gradient {
background:
radial-gradient(circle at 20% 20%, rgba(46, 255, 190, .42), transparent 32%),
radial-gradient(circle at 74% 34%, rgba(255, 94, 210, .28), transparent 34%),
radial-gradient(circle at 52% 78%, rgba(255, 211, 92, .22), transparent 32%),
#080b0a;
}React 示例
export function AuroraSection({ children }) {
return <section className="aurora-gradient">{children}</section>;
}