极光渐变背景

Aurora Gradient Background

初级通用

几团大面积的彩色光斑在页面背后缓慢漂移、互相融合，像极光一样，再叠一层很淡的噪点增加质感。Stripe、各种 AI 产品官网的首屏都爱用，比静态渐变更有生命力，又不会抢标题的风头。

你可能会说：「首页背景能不能做成那种几团彩色光慢慢飘、互相融合的效果，像极光一样？」

效果预览几团光斑在背后缓缓漂移融合

正在加载演示…

怎么做3 步做出来

1
几个大圆色块，各自模糊
在容器里放三个绝对定位的大圆，各用一种颜色，再用很大的 blur（50~80px）把边缘完全糊掉，颜色就会融成一片。容器 overflow: hidden 裁掉溢出的部分，isolation: isolate 让混合模式只在容器内生效。
查看代码收起代码html
```
<section class="aurora">
  <span class="aurora__blob aurora__blob--a"></span>
  <span class="aurora__blob aurora__blob--b"></span>
  <span class="aurora__blob aurora__blob--c"></span>
  <div class="aurora__content">
    <h1>新一代 AI 工作台</h1>
  </div>
</section>
```

不同周期的漂移

每个色块用不同的漂移方向和时长（14、18、22 秒），并用 alternate 来回往返。周期互不相同，组合起来的画面就很少重复，看起来像在自然流动。

查看代码css

.aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #020617;
}
.aurora__blob {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  mix-blend-mode: screen;
  z-index: -1;
}
.aurora__blob--a { left: -10%; top: -20%; background: #6366f1; animation: drift-a 14s ease-in-out infinite alternate; }
.aurora__blob--b { right: -10%; top: 0;   background: #ec4899; animation: drift-b 18s ease-in-out infinite alternate; }
.aurora__blob--c { left: 20%; bottom: -35%; background: #22d3ee; animation: drift-c 22s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(30%, 20%) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-25%, 25%) scale(0.9); } }
@keyframes drift-c { to { transform: translate(15%, -30%) scale(1.2); } }

叠一层噪点，减少动效时静止

纯渐变在大屏上容易出现一圈圈的色带，叠一层很淡的噪点纹理能打散它，也更有质感；噪点直接用内联的 SVG 滤镜生成，不用额外图片。模糊很耗性能，手机上可以减小色块和模糊半径。

查看代码css

.aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .aurora__blob { animation: none; }
}

适合放在哪

适合用

AI、SaaS 产品官网的首屏背景。
登录页、注册页的装饰背景。
活动页、发布会页面的开场区域。

不适合用

正文阅读区域别用；漂移的色块会干扰阅读。
浅色背景上光斑会显得脏，效果不如深色背景；浅色页面可以降低饱和度和透明度。
低端手机为主时，大面积 blur 可能掉帧；减小色块或改成静态渐变。

让 AI 帮你做复制给 AI Agent 直接用

请给【需要氛围感背景的区域，如：首页 Hero 首屏】加上极光渐变背景。先阅读这个区域的组件结构和品牌色变量。要求：容器 position: relative、isolation: isolate、overflow: hidden；放 3 个绝对定位的大圆色块（品牌色系），filter: blur 约 60px、mix-blend-mode: screen，放在内容下方；每个色块用不同的漂移动画（14~22 秒、alternate 往返）；叠一层低透明度的噪点纹理；窄屏手机上减小色块和模糊半径；开启减少动效时停止漂移。标题和按钮的对比度要足够。不新增依赖，不改无关代码。最后说明怎样在手机上检查帧率。

用到的知识

渐变滤镜与混合模式关键帧首屏