25 CSS Spinners25 / 25

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

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

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>
.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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Spinner from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Aurora Gradient Orb Spinner
Source: https://codefronts.com/motion/css-spinner-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

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

Gotchas — read before shipping

  • 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

ChromeSafariFirefoxEdge
79+16+72+79+

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

Techniques used in this demo

mix-blend-modeMDN ↗filterMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →