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:
I even added this one to our old design firm’s website back when I was part of the team (they’ve still kept a modified version of it!).