25 CSS Spinners 25 / 25

Aurora Gradient Orb Spinner

A softly glowing orb pulses with shifting aurora borealis colours — layered radial gradients rotate independently with hue-shift filters — while a single orbital ring traces a luminous dot around the perimeter.

Pure CSS MIT licensed

Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="sp-25">
  <div class="sp-25__orb">
    <div class="sp-25__layer"></div>
    <div class="sp-25__layer"></div>
    <div class="sp-25__layer"></div>
    <div class="sp-25__ring"></div>
  </div>
</div>

<div class="sp-25">
  <div class="sp-25__orb">
    <div class="sp-25__layer"></div>
    <div class="sp-25__layer"></div>
    <div class="sp-25__layer"></div>
    <div class="sp-25__ring"></div>
  </div>
</div>

.sp-25,.sp-25 *,.sp-25 *::before,.sp-25 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-25{
  --bg:#020d12;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-25__orb{
  position:relative;
  width:100px;
  height:100px;
}
.sp-25__layer{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.sp-25__layer:nth-child(1){
  background:radial-gradient(circle at 30% 40%,#00e5ff,transparent 60%),
             radial-gradient(circle at 70% 60%,#69f0ae,transparent 60%);
  filter:blur(4px);
  animation:sp-25-aurora1 4s ease-in-out infinite;
}
.sp-25__layer:nth-child(2){
  background:radial-gradient(circle at 60% 30%,#7c4dff,transparent 55%),
             radial-gradient(circle at 40% 70%,#40c4ff,transparent 55%);
  filter:blur(6px);
  animation:sp-25-aurora2 5s ease-in-out infinite;
  animation-delay:-2s;
  mix-blend-mode:screen;
}
.sp-25__layer:nth-child(3){
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.15),transparent 50%);
  animation:sp-25-pulse 3s ease-in-out infinite;
}
.sp-25__ring{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.2);
  animation:sp-25-spin 8s linear infinite;
}
.sp-25__ring::after{
  content:'';
  position:absolute;
  top:2px;
  left:50%;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:rgba(255,255,255,0.8);
  box-shadow:0 0 6px white;
}
@keyframes sp-25-aurora1{
  0%,100%{transform:rotate(0deg) scale(1);filter:blur(4px) hue-rotate(0deg)}
  33%{transform:rotate(120deg) scale(1.1);filter:blur(5px) hue-rotate(60deg)}
  66%{transform:rotate(240deg) scale(0.95);filter:blur(3px) hue-rotate(120deg)}
}
@keyframes sp-25-aurora2{
  0%,100%{transform:rotate(0deg) scale(1.05)}
  50%{transform:rotate(-180deg) scale(0.95)}
}
@keyframes sp-25-pulse{
  0%,100%{opacity:0.4}
  50%{opacity:0.9}
}
@keyframes sp-25-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-25__layer,.sp-25__ring{animation:none}
}

.sp-25,.sp-25 *,.sp-25 *::before,.sp-25 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-25{
  --bg:#020d12;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-25__orb{
  position:relative;
  width:100px;
  height:100px;
}
.sp-25__layer{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.sp-25__layer:nth-child(1){
  background:radial-gradient(circle at 30% 40%,#00e5ff,transparent 60%),
             radial-gradient(circle at 70% 60%,#69f0ae,transparent 60%);
  filter:blur(4px);
  animation:sp-25-aurora1 4s ease-in-out infinite;
}
.sp-25__layer:nth-child(2){
  background:radial-gradient(circle at 60% 30%,#7c4dff,transparent 55%),
             radial-gradient(circle at 40% 70%,#40c4ff,transparent 55%);
  filter:blur(6px);
  animation:sp-25-aurora2 5s ease-in-out infinite;
  animation-delay:-2s;
  mix-blend-mode:screen;
}
.sp-25__layer:nth-child(3){
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.15),transparent 50%);
  animation:sp-25-pulse 3s ease-in-out infinite;
}
.sp-25__ring{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.2);
  animation:sp-25-spin 8s linear infinite;
}
.sp-25__ring::after{
  content:'';
  position:absolute;
  top:2px;
  left:50%;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:rgba(255,255,255,0.8);
  box-shadow:0 0 6px white;
}
@keyframes sp-25-aurora1{
  0%,100%{transform:rotate(0deg) scale(1);filter:blur(4px) hue-rotate(0deg)}
  33%{transform:rotate(120deg) scale(1.1);filter:blur(5px) hue-rotate(60deg)}
  66%{transform:rotate(240deg) scale(0.95);filter:blur(3px) hue-rotate(120deg)}
}
@keyframes sp-25-aurora2{
  0%,100%{transform:rotate(0deg) scale(1.05)}
  50%{transform:rotate(-180deg) scale(0.95)}
}
@keyframes sp-25-pulse{
  0%,100%{opacity:0.4}
  50%{opacity:0.9}
}
@keyframes sp-25-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-25__layer,.sp-25__ring{animation:none}
}

How this works

Three absolutely-positioned layers fill the same circular bounds. The first two carry overlapping radial-gradient pairs in complementary aurora hues (cyan/green and violet/blue), each blurred and animated with hue-rotate inside their keyframes — sp-25-aurora1 rotates 360° over 4s while shifting hue by 120°, making the colour appear to slowly cycle. The second layer uses mix-blend-mode:screen so its gradients add luminance to the layer below rather than replacing it.

A third layer provides a soft white specular highlight at the orb centre. The outermost ring element has a ::after pseudo-element dot that always sits at the 12 o'clock position; the ring's continuous sp-25-spin rotation carries the dot around the orb perimeter, acting as a subtle progress indicator.

Customize

Change the aurora palette by editing the radial-gradient colours in each layer — warm coral/pink tones create a sunrise orb; deep red/amber creates a Mars-like atmosphere.
Increase blur intensity on layer 1 from blur(4px) to blur(8px) for a more diffuse, cloudlike aurora.
Remove the orbital ring for a purely atmospheric orb with no mechanical spinner component.
Add a fourth colour layer at mix-blend-mode:color-dodge for more intense colour saturation at layer intersections.
Slow all aurora animations to 8–10s for a background ambient element rather than an active spinner.

Watch out for

filter:hue-rotate() inside a keyframe is supported in Chrome and Firefox but can cause flickering in older Safari (pre-16) — test on Safari and provide a simpler fallback if needed.
mix-blend-mode:screen requires the parent background to be dark for the additive blend to produce bright colours; on light backgrounds the layers will wash out.
Animating hue-rotate inside keyframes forces a filter recalculation on each frame; for performance-critical scenarios, consider pre-generating the aurora as a layered SVG with CSS rotation only.

Browser support

Chrome	Safari	Firefox	Edge
79+	16+	72+	79+

hue-rotate() in keyframe filter requires Safari 16+ for flicker-free rendering; mix-blend-mode supported everywhere modern.

More from 25 CSS Spinners

Neon Arc CSS Spinner Dual Counter-Rotate Ring Spinner Dot Chase Orbit Spinner Gradient Conic Sweep Spinner Heartbeat Pulse Loader Wave Bar Equalizer Spinner Stacked Ring Helix Spinner Morph Square-to-Circle Spinner Comet Trail CSS Spinner DNA Double Helix Spinner Folding Cube Grid Spinner Ripple Pulse Ring Spinner

View the full collection →