← 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.

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.

Cool layer drift

Polar Band

Soft cyan and violet bands drift behind a legibility-preserving foreground surface. Keep text on an independent surface and let the aurora layer remain decorative.

  • gradient-layers
  • transform
  • opacity

Warm accent pass

Sunset Veil

A warmer aurora pass adds amber and rose without making the foreground copy glow. Warm layers are lower opacity so they do not collapse contrast on dark UI.

  • sweep-blur
  • warm stops
  • contrast

Low-motion background

Quiet Header

A restrained band works for headers that need depth but not constant attention. Use longer durations and smaller travel distances when the effect sits behind navigation.

  • ambient
  • long duration
  • background

Aurora inspector

Polar Band

  • gradient-layers
  • transform
  • opacity

Soft cyan and violet bands drift behind a legibility-preserving foreground surface. Keep text on an independent surface and let the aurora layer remain decorative.

.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; }
}