25 CSS Spinners 17 / 25

Glassmorphism Loader Spinner

A frosted-glass circle with backdrop-filter blur floats over animated colour blobs, with two nested arcs spinning at different speeds to create a layered glassmorphic loading indicator.

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-17">
  <div class="sp-17__blobs">
    <div class="sp-17__blob"></div>
    <div class="sp-17__blob"></div>
    <div class="sp-17__blob"></div>
  </div>
  <div class="sp-17__glass">
    <div class="sp-17__arc"></div>
    <div class="sp-17__arc-inner"></div>
  </div>
</div>
.sp-17,.sp-17 *,.sp-17 *::before,.sp-17 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-17{
  --bg:#1a0533;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
  overflow:hidden;
}
.sp-17__blobs{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.sp-17__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.6;
  animation:sp-17-float 6s ease-in-out infinite;
}
.sp-17__blob:nth-child(1){
  width:200px;height:200px;
  background:#7c3aed;
  top:-80px;left:-60px;
  animation-delay:0s;
}
.sp-17__blob:nth-child(2){
  width:180px;height:180px;
  background:#ec4899;
  bottom:-60px;right:-40px;
  animation-delay:-2s;
}
.sp-17__blob:nth-child(3){
  width:160px;height:160px;
  background:#3b82f6;
  top:20%;right:10%;
  animation-delay:-4s;
}
.sp-17__glass{
  position:relative;
  width:100px;
  height:100px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sp-17__arc{
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:rgba(255,255,255,0.9);
  border-right-color:rgba(255,255,255,0.4);
  animation:sp-17-spin 1.1s linear infinite;
}
.sp-17__arc-inner{
  position:absolute;
  inset:20px;
  border-radius:50%;
  border:2px solid transparent;
  border-bottom-color:rgba(255,255,255,0.7);
  animation:sp-17-spin 0.8s linear infinite reverse;
}
@keyframes sp-17-spin{
  to{transform:rotate(360deg)}
}
@keyframes sp-17-float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-20px) scale(1.05)}
}
@media (prefers-reduced-motion: reduce){
  .sp-17__arc,.sp-17__arc-inner,.sp-17__blob{animation:none}
}

How this works

Three large radial-gradient blobs are positioned in the background and animated with a slow floating keyframe (sp-17-float) that nudges them up and down. Their filter:blur(60px) softens them into smooth colour pools. The glass disc uses backdrop-filter:blur(12px) and a semi-transparent white background to frost the blobs visible beneath, plus a border:1px solid rgba(255,255,255,0.2) to define the glass edge.

Inside the disc, two arcs (outer and inner) spin at different speeds (1.1s and 0.8s) and directions, using the same transparent-border technique but with semi-transparent white strokes to maintain the glass aesthetic without colour bleeding.

Customize

  • Change blob colours (#7c3aed, #ec4899, #3b82f6) to shift the overall colour temperature of the frosted background.
  • Increase backdrop-filter:blur() from 12px to 24px for a more heavily frosted glass; decrease to 4px for a subtle tint.
  • Add a fourth blob at a different position and animation phase to increase colour variety behind the glass.
  • Replace the two arc spinners with a single conic-gradient spinner for a different inner mechanic while keeping the glass shell.
  • Add box-shadow:0 8px 32px rgba(0,0,0,0.5) to deepen the glass disc's shadow cast on the background.

Watch out for

  • backdrop-filter:blur() requires the element to be on its own stacking context — ensure no ancestor has transform or filter that would break the backdrop reference in Safari.
  • Older Safari (pre-15.4) requires -webkit-backdrop-filter prefix alongside the standard property — add both for full coverage.
  • The floating blobs use filter:blur(60px) which forces GPU rasterisation of large elements; on mobile, reduce blur radius or use smaller blob dimensions to reduce memory pressure.

Browser support

ChromeSafariFirefoxEdge
76+ 14+ 103+ 76+

backdrop-filter requires Chrome 76+, Safari 14+, Firefox 103+; add -webkit- prefix for Safari 9-13.

More from 25 CSS Spinners

Cyberpunk Segmented Ring SpinnerBreathing Circle LoaderParticle Scatter Burst SpinnerRetro TV Static Noise LoaderLiquid Blob CSS SpinnerProgress Arc Fill SpinnerMatrix Rain Column SpinnerAurora Gradient Orb SpinnerNeon Arc CSS SpinnerDual Counter-Rotate Ring SpinnerDot Chase Orbit SpinnerGradient Conic Sweep Spinner
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →