🍱 Lunchbox Hands

Animated Gradient Background

Moving CSS gradient backgrounds — 8 animated styles

Generate animated CSS gradient backgrounds — shifting linears, rotating conics, aurora blobs, and more. Pick your colors and speed, then copy the standalone CSS. Everything runs in your browser.

Shifting Linear
Rotating Conic
Aurora
Breathing Radial
Diagonal Drift
Hue Rotate
Scrolling Stripes
Floating Blobs
s
°
.lb-grad-pan {
  width: 100%;
  min-width: 160px;
  height: 160px;
  border-radius: 12px;
  background: linear-gradient(45deg, #6366f1, #ec4899, #f59e0b);
  background-size: 300% 300%;
  animation: lb-grad-pan 6s ease infinite;
}
@keyframes lb-grad-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-grad-pan, .lb-grad-pan::before, .lb-grad-pan::after {
    animation: none;
    transition: none;
  }
}

Get weekly dev tools and tips