极光渐变
Aurora Gradient
几团彩色光斑在底色上慢慢游动，像极光一样铺满整屏。
- 又叫：
- 极光背景
- 流动渐变
- 光晕背景
- aurora background
- aurora gradient
- animated gradient background
- 展厅
- 视觉质感
- 形态
- 固定舞台
- 播放
- 常驻循环
- 关键词
- 纯 CSS / 渐变 / 滤镜与混合 / 重绘开销 / 动效较多 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个极光渐变背景（aurora gradient）：深色底上放 4 团大的 radial-gradient 光斑（配色 aurora），每团 filter: blur(80px)、mix-blend-mode: screen，用 transform: translate3d 让它们以各自不同的速度慢慢漂移，一轮约 30s、linear 循环。光斑放独立图层，不要每帧改 background-position；正文压在上面时留暗罩保证对比度。prefers-reduced-motion 下停住动画，只留静态渐变。
aurora gradient background, 4 large radial-gradient blobs (aurora palette) on a dark base, each with filter: blur(80px) and mix-blend-mode: screen, drifting at slightly different speeds with transform: translate3d in a 30s linear loop, kept on their own layers instead of animating background-position, dark scrim behind body text for contrast, animation paused under prefers-reduced-motion
https://publieople.github.io/design-museum/entry/aurora-gradient/?stage=photo
链接带着你调好的参数
什么时候用
- 落地页、产品首屏的大背景，要氛围但不要具体图形
- 深色界面想要一块会呼吸的底色
- 发布页、活动页需要持续流动感，又不想用视频或图片
适用场景：页面 / 卡片
推荐取值
- 光斑数量
- 3–5 团
- 模糊半径
- 60–100px
- 一轮时长
- 20–40s
- 混合模式
- mix-blend-mode: screen（深色底）
- 对比度
- 正文 ≥ 4.5:1，必要时加暗罩
别搞混
和「网格渐变」的区别
网格渐变是多个径向渐变叠出来的静态柔光；极光是这些光团在位移（translate + blur + 饱和度），重点在「慢慢游动」。
容易混的去看「渐变网格」
和「聚光卡片」的区别
聚光跟着指针走，是人给的反馈；极光自己漂，有没有人都一样。
容易踩的坑
- 大面积模糊很贵：光斑要放在独立图层里用 transform 位移，别每帧改 background-position
- 光斑 3–5 团就够，堆多了只会糊成一片，看不出「极光」
- 动画要慢（一轮 20–40s），快了像故障闪烁
- 深色底效果好；浅色底上要压低饱和度，否则显脏
- 文字压在上面要留对比度兜底（暗罩或压到暗部），别让正文落在最亮的光上
- prefers-reduced-motion 下停住动画，静态渐变仍然好看
无障碍降级
prefers-reduced-motion 下把光斑的位移动画停掉，保留静态渐变，氛围还在但不再动。
关键词
- aurora gradient
- animated gradient
- radial-gradient
- filter: blur()
- mix-blend-mode: screen
- transform: translate3d
- hue-rotate()
- saturate()