Animated gradient stripe

“Who doesn’t love a gradient? It’s the visual equivalent of a smooth jazz solo—effortless, stylish, and always a vibe.” 🎨✨. Okay, maybe a bit much—but when used well, it’s hard not to love.

I came across this cool animated gradient strip when I was browsering ESRI mapping docs.

.gradient-stripe {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #29bfff, #a231ff, #0deccd, #29bfff);
  background-size: 133vw 5px;
  background-repeat: repeat-x;
  animation: gradient 4s linear infinite;
}

@keyframes gradient {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 133vw;
  }
}

The result: