Loading Library

Pixel Glow Spinners

Tune color, size, spacing, and speed. Preview live, then copy the snippet.

rain-4

HTML

<div class="pixel-spinner">
  <div class="cell cell-0"></div>
  <div class="cell cell-1"></div>
  <div class="cell cell-2"></div>
  <div class="cell cell-3"></div>
  <div class="cell cell-4"></div>
  <div class="cell cell-5"></div>
  <div class="cell cell-6"></div>
  <div class="cell cell-7"></div>
  <div class="cell cell-8"></div>
  <div class="cell cell-9"></div>
  <div class="cell cell-10"></div>
  <div class="cell cell-11"></div>
  <div class="cell cell-12"></div>
  <div class="cell cell-13"></div>
  <div class="cell cell-14"></div>
  <div class="cell cell-15"></div>
</div>

CSS

.pixel-spinner {
  display: inline-grid;
  grid-template-columns: repeat(4, 6px);
  gap: 3px;
}
.pixel-spinner .cell {
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #ff9966, #ff5e62);
  box-shadow:
    0 0 4px #ff5e62,
    0 0 10px #ff5e6280,
    0 0 19px #ff5e6255;
  opacity: 0;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}
.pixel-spinner .cell-0 { animation-name: ps-0; }
.pixel-spinner .cell-1 { animation-name: ps-1; }
.pixel-spinner .cell-2 { animation-name: ps-2; }
.pixel-spinner .cell-3 { animation-name: ps-3; }
.pixel-spinner .cell-4 { animation-name: ps-4; }
.pixel-spinner .cell-5 { animation-name: ps-5; }
.pixel-spinner .cell-6 { animation-name: ps-6; }
.pixel-spinner .cell-7 { animation-name: ps-7; }
.pixel-spinner .cell-8 { animation-name: ps-8; }
.pixel-spinner .cell-9 { animation-name: ps-9; }
.pixel-spinner .cell-10 { animation-name: ps-10; }
.pixel-spinner .cell-11 { animation-name: ps-11; }
.pixel-spinner .cell-12 { animation-name: ps-12; }
.pixel-spinner .cell-13 { animation-name: ps-13; }
.pixel-spinner .cell-14 { animation-name: ps-14; }
.pixel-spinner .cell-15 { animation-name: ps-15; }

@keyframes ps-0 {
  0.00%, 24.99% { opacity: 1; }
  25.00%, 49.99% { opacity: 0.5; }
  50.00%, 74.99% { opacity: 0.25; }
  75.00%, 99.99% { opacity: 0.15; }
}
@keyframes ps-1 {
  0.00%, 24.99% { opacity: 0.5; }
  25.00%, 49.99% { opacity: 0.25; }
  50.00%, 74.99% { opacity: 0.15; }
  75.00%, 99.99% { opacity: 1; }
}
@keyframes ps-2 {
  0.00%, 24.99% { opacity: 0.25; }
  25.00%, 49.99% { opacity: 0.15; }
  50.00%, 74.99% { opacity: 1; }
  75.00%, 99.99% { opacity: 0.5; }
}
@keyframes ps-3 {
  0.00%, 24.99% { opacity: 0.15; }
  25.00%, 49.99% { opacity: 1; }
  50.00%, 74.99% { opacity: 0.5; }
  75.00%, 99.99% { opacity: 0.25; }
}
@keyframes ps-4 {
  0.00%, 24.99% { opacity: 0.15; }
  25.00%, 49.99% { opacity: 1; }
  50.00%, 74.99% { opacity: 0.5; }
  75.00%, 99.99% { opacity: 0.25; }
}
@keyframes ps-5 {
  0.00%, 24.99% { opacity: 1; }
  25.00%, 49.99% { opacity: 0.5; }
  50.00%, 74.99% { opacity: 0.25; }
  75.00%, 99.99% { opacity: 0.15; }
}
@keyframes ps-6 {
  0.00%, 24.99% { opacity: 0.5; }
  25.00%, 49.99% { opacity: 0.25; }
  50.00%, 74.99% { opacity: 0.15; }
  75.00%, 99.99% { opacity: 1; }
}
@keyframes ps-7 {
  0.00%, 24.99% { opacity: 0.25; }
  25.00%, 49.99% { opacity: 0.15; }
  50.00%, 74.99% { opacity: 1; }
  75.00%, 99.99% { opacity: 0.5; }
}
@keyframes ps-8 {
  0.00%, 24.99% { opacity: 0.25; }
  25.00%, 49.99% { opacity: 0.15; }
  50.00%, 74.99% { opacity: 1; }
  75.00%, 99.99% { opacity: 0.5; }
}
@keyframes ps-9 {
  0.00%, 24.99% { opacity: 0.15; }
  25.00%, 49.99% { opacity: 1; }
  50.00%, 74.99% { opacity: 0.5; }
  75.00%, 99.99% { opacity: 0.25; }
}
@keyframes ps-10 {
  0.00%, 24.99% { opacity: 1; }
  25.00%, 49.99% { opacity: 0.5; }
  50.00%, 74.99% { opacity: 0.25; }
  75.00%, 99.99% { opacity: 0.15; }
}
@keyframes ps-11 {
  0.00%, 24.99% { opacity: 0.5; }
  25.00%, 49.99% { opacity: 0.25; }
  50.00%, 74.99% { opacity: 0.15; }
  75.00%, 99.99% { opacity: 1; }
}
@keyframes ps-12 {
  0.00%, 24.99% { opacity: 0.5; }
  25.00%, 49.99% { opacity: 0.25; }
  50.00%, 74.99% { opacity: 0.15; }
  75.00%, 99.99% { opacity: 1; }
}
@keyframes ps-13 {
  0.00%, 24.99% { opacity: 0.25; }
  25.00%, 49.99% { opacity: 0.15; }
  50.00%, 74.99% { opacity: 1; }
  75.00%, 99.99% { opacity: 0.5; }
}
@keyframes ps-14 {
  0.00%, 24.99% { opacity: 0.15; }
  25.00%, 49.99% { opacity: 1; }
  50.00%, 74.99% { opacity: 0.5; }
  75.00%, 99.99% { opacity: 0.25; }
}
@keyframes ps-15 {
  0.00%, 24.99% { opacity: 1; }
  25.00%, 49.99% { opacity: 0.5; }
  50.00%, 74.99% { opacity: 0.25; }
  75.00%, 99.99% { opacity: 0.15; }
}