Animated Gradient Background

This visually striking animated gradient background features seamless, fluid color transitions implemented entirely with CSS. It achieves a continuous, flowing color effect by shifting the background position via keyframe animations.

Implementation Code

Copy the code below to integrate this effect into your project.

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Explanation

The mechanics behind this animated background rely on two key CSS properties:

1. background-size: 400% 400%: This scales the gradient to four times the size of its container, extending the color spectrum well beyond the visible area.
2. @keyframes gradient-flow: By smoothly animating the background-position from 0% to 100% and back to 0%, the expanded gradient shifts across the container, creating the illusion of moving, morphing colors.

You can easily tailor this effect to align with your project’s aesthetic by adjusting the linear-gradient color stops and modifying the animation duration.