Animated Gradient Background

<div class="animated-gradient-bg">
  <div class="gradient-content">
    <span>Animated Background</span>
    <h2>Bring Your Interface to Life</h2>
    <p>Pure CSS gradient animation.</p>
  </div>
</div>

.animated-gradient-bg{
  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  background:
    linear-gradient(
      120deg,
      #050914,
      #172554,
      #4c1d95,
      #164e63,
      #050914
    );

  background-size:300% 300%;

  animation:gradientMove 8s ease infinite;
}

.gradient-content{
  position:relative;
  z-index:2;
  max-width:600px;
  padding:30px;
  text-align:center;
}

.gradient-content span{
  display:inline-block;
  margin-bottom:12px;
  color:#22d3ee;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.gradient-content h2{
  margin:0 0 12px;
  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.gradient-content p{
  margin:0;
  color:#c7d2e5;
  font-size:15px;
}

@keyframes gradientMove{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}

How This Animated Gradient Background Works

The Animated Gradient Background creates a dark, continuously shifting color backdrop using a single CSS linear gradient. Unlike components that animate separate decorative elements, this effect applies the animation directly to the background of the main container. The published component uses only HTML and CSS and contains no JavaScript.

The HTML structure is compact. A single .animated-gradient-bg wrapper contains .gradient-content, which holds the small “Animated Background” label, main heading, and supporting paragraph. There are no extra elements for the animation because the entire visual effect is generated through the container’s CSS background property.

The background uses linear-gradient() at an angle of 120deg. Five color stops form the palette: dark navy #050914, deeper blue #172554, purple #4c1d95, teal #164e63, and finally #050914 again. Repeating the dark starting color at the end helps the gradient return toward its original tone as different areas move through the visible section.

The key detail is background-size: 300% 300%. Instead of fitting the complete gradient exactly inside the container, CSS renders a background three times larger in both dimensions. Only part of that oversized gradient is visible at any moment. The animation can therefore move the visible window across different portions of the color blend.

The gradientMove keyframes control this movement through background-position. At 0%, the background is positioned at 0% 50%. Halfway through the animation, it moves to 100% 50%, revealing the opposite horizontal region of the oversized gradient. At 100%, it returns to 0% 50%. For more detail about positioning oversized CSS backgrounds, see the MDN background-position documentation.

The animation runs for eight seconds using ease timing and repeats infinitely. Unlike a linear animation, ease changes the movement rate during the cycle, so the gradient does not travel across the background at one constant speed. Because the keyframes explicitly return to the starting position, no alternate animation direction is needed.

The main .animated-gradient-bg container has a minimum height of 320px and uses flexbox to center its content horizontally and vertically. position: relative establishes the container’s positioning context, while overflow: hidden keeps its contents within the section boundaries.

The .gradient-content element uses position: relative and z-index: 2. It has a maximum width of 600px, 30px of padding, and centered text. The label is cyan #22d3ee, uses a 12px font size, 800 weight, 1.5px letter spacing, and uppercase text. The heading is white at 32px with a 1.2 line height, while the paragraph uses 15px text in #c7d2e5.

Customizing the Animated Gradient Background

The effect can be adjusted through its existing gradient colors, angle, background dimensions, animation timing, and typography values.

• Replace #050914, #172554, #4c1d95, and #164e63 to create a different animated color palette.
• Change the 120deg gradient angle to alter the direction in which the colors are arranged.
• Adjust background-size: 300% 300% to change how much of the oversized gradient is visible at once.
• Modify the 0% 50% and 100% 50% background positions inside gradientMove to change the direction and range of movement.
• Change the 8s animation duration to make the gradient cycle faster or slower.
• Replace the ease timing function if the background needs a different movement rhythm.
• Adjust min-height: 320px to make the animated section taller or shorter.
• Modify the 600px content width, 30px padding, or existing text sizes to fit the surrounding page layout.

Where to Use This Animated Gradient Background

The continuously shifting colors work well for sections that need visible movement without additional decorative HTML or JavaScript logic.

• SaaS and software landing-page hero sections.
• Developer or designer portfolio introductions.
• Product and application announcement banners.
• Call-to-action sections with centered content.
• Technology website headers using dark blue, purple, and teal colors.
• Signup or newsletter sections that need subtle background motion.
• Feature introductions where a static solid color would feel too plain.

For a related effect that separates the colors into multiple moving blurred layers, the Aurora Background is another CodeRipple option. Animated Gradient Background keeps its implementation simpler by moving one oversized gradient directly through background-position.

Frequently Asked Questions

Does the Animated Gradient Background require JavaScript?

No. The published component contains no JavaScript. Its gradient movement, layout, colors, and typography are handled entirely with CSS.

How does the gradient move across the background?

The gradient is rendered at 300% 300% of the background area. The gradientMove keyframes then change its background-position horizontally between 0% 50% and 100% 50%, exposing different parts of the oversized gradient.

What colors are used in the animated gradient?

The gradient combines #050914, #172554, #4c1d95, and #164e63, then returns to #050914. These values create the dark navy, blue, purple, and teal color sequence used by the component.

How long does one gradient animation cycle take?

The gradientMove animation lasts eight seconds. It starts at 0% 50%, reaches 100% 50% halfway through, and returns to its initial position by the end before repeating infinitely.

The Animated Gradient Background uses one oversized linear gradient and animated background positioning to create continuous color movement with minimal HTML and no JavaScript or external graphics.