← Back to gallery
CSSFeatured

Aurora Gradient Sweep

Layered radial gradients drift behind readable foreground content using transform, opacity, and background-position friendly timing with a static reduced-motion fallback.

Duration
10s
Resolution
1440×900
Format
CSS
auroraradial-gradientbackground-layeropacityreduced-motion

Background / Gradient Layers

Aurora Gradient Sweep

Layered radial gradients drift with transform, background-position, and opacity instead of relying on gradient stop interpolation.

polar band aurora sweep - 9.0s cycle · 1.00 intensity
Polar

Cool layer drift

Polar Band

Soft cyan and violet bands drift behind a legibility-preserving foreground surface.

Motion is limited to layer transform and opacity, so the gradient definition stays stable.

  • gradient-layers
  • transform
  • opacity
Veil

Warm accent pass

Sunset Veil

A warmer aurora pass adds amber and rose without making the foreground copy glow.

Opacity changes stay subtle and independent per layer.

  • sweep-blur
  • warm stops
  • contrast
Header

Low-motion background

Quiet Header

A restrained band works for headers that need depth but not constant attention.

The layer never crosses above the foreground z-index.

  • ambient
  • long duration
  • background

Aurora inspector

Polar Band

Polar
Motion contract
Motion is limited to layer transform and opacity, so the gradient definition stays stable.
Accessibility
Reduced motion freezes the layer positions while preserving contrast.

Keep text on an independent surface and let the aurora layer remain decorative.

css
.aurora {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 20% 40%, #22d3ee, transparent 32%),
    radial-gradient(circle at 74% 28%, #a78bfa, transparent 36%);
  filter: blur(calc(22px * 1.00));
  animation: auroraDrift 9.00s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
}