Animated Gradient Generator

Animated gradient generator for looping CSS backgrounds

This animated gradient generator turns two to eight colors into a smooth, endlessly looping CSS background. You choose the colors, direction, speed and easing, watch the result move in a live preview, then copy the finished keyframe code. It is free, runs in your browser and needs no signup.

How to create a CSS animated gradient

You can build a working animated gradient background in under a minute. Follow these steps in the settings panel.

1. Click a preset (Sunset, Ocean, Aurora, Candy, Lava or Midnight) or edit the colors under Gradient colors. Use Add color for more stops and drag the grip handle to reorder them.
2. Press Random palette if you want a fresh set of three or four colors to start from.
3. Choose a Gradient type: Linear or Radial. For linear gradients, drag the Angle slider from 0 to 360 degrees.
4. Pick a Motion (Horizontal shift, Vertical shift or Diagonal sweep), then set the Loop duration, Easing and Background size.
5. Check the Live Animated Gradient Preview. Use the pause button on the preview if you want to inspect a single frame.
6. Switch between the CSS and Tailwind CSS tabs, then use Copy CSS, Copy Tailwind, Download CSS, HTML demo or Share link.

Animated gradient settings you can control

Every control updates the preview and the code immediately, so you can tune the motion by eye.

• Colors and presets: use between 2 and 8 color stops. Type a HEX value or use the color picker for each one.
• Gradient type and angle: linear gradients follow your angle. Radial gradients are drawn as a circle from the center, so the angle slider is disabled.
• Motion: horizontal, vertical or diagonal movement of the gradient inside its box.
• Loop duration: from 1 to 30 seconds for one full cycle. The default is 6 seconds.
• Easing: Ease, Linear, Ease-in-out or Smooth (Material), which uses cubic-bezier(0.4, 0, 0.2, 1).
• Background size: 200% x 200% (subtle), 300% x 300% or 400% x 400% (dramatic).
• Text demo: an editable line of sample text below the preview shows the same gradient clipped to lettering.

How does a CSS gradient animation work?

A CSS gradient animation works by sliding an oversized gradient across a smaller box. Plain CSS does not smoothly blend one gradient image into another, so the generator stretches the gradient with background-size and animates background-position instead. The visible window moves across the colors, which looks like flowing color.

The default output looks like this:

.animated-gradient {
  background: linear-gradient(135deg, #6366F1, #EC4899, #F59E0B);
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

The generated code also adds a prefers-reduced-motion block that sets animation: none, which the example above leaves out for brevity. MDN explains the underlying properties in its guide to using CSS animations.

Why the first and last keyframes match

The keyframes list the same position at 0% and 100%, with the opposite position at 50%. The gradient therefore travels out and back, and the last frame equals the first frame. That is what makes the loop seamless, with no visible jump when the animation restarts.

Because the cycle includes both directions, a 6 second loop spends about 3 seconds moving each way.

Motion, background size and easing compared

Motion decides the direction, background size decides how far the colors travel, and easing decides how the movement accelerates. The table shows the three motion options and the positions each one animates between.

Which background size should you choose?

Start with 300% x 300%, which is the tool's default, and adjust from there. A larger size stretches each color band and gives the gradient a longer path to travel, so the same duration feels faster and more dramatic. Use 200% x 200% for calm, subtle shifts behind text, and 400% x 400% for bold hero sections.

Which easing looks best for a gradient loop?

Ease-in-out and Smooth (Material) feel the most natural, because the motion slows at both turning points. Linear keeps a constant speed, which suits long, slow loops but makes the reversal at the midpoint more noticeable. Ease starts quickly and settles, a good general choice.

Is an animated gradient background accessible?

An animated gradient can be accessible if you respect motion preferences and keep text readable. Some people get distracted or feel unwell when large areas move, so the exported CSS switches the animation off for visitors whose device asks for reduced motion. MDN documents this setting under prefers-reduced-motion.

WCAG 2.2 success criterion 2.2.2 also matters. It generally requires a way to pause, stop or hide moving content that starts automatically, lasts more than five seconds and appears next to other content. Read the W3C explanation of Pause, Stop, Hide to judge whether your page needs a control. A pause button in this tool only affects the preview, so add your own control if your live page needs one.

Text over a moving background needs enough contrast against every color the gradient reaches. Run the lightest and darkest stops through the contrast checker against your text color, or review type sizes with the color legibility analyzer. When in doubt, put text on a solid panel above the gradient.

Can you use the animated gradient in Tailwind CSS?

Yes. The Tailwind CSS tab produces a setup for both Tailwind v4 and v3. For v4 you get an @theme block with a --animate-gradient-shift variable and the keyframes. For v3 you get a commented keyframes and animation snippet to paste into theme.extend in your config.

The tab also gives a ready-to-use element with utility classes, including animate-gradient-shift and motion-reduce:animate-none. The gradient and background size are written as arbitrary values, so you can drop the element into a page after adding the theme code. If you need full color scales for the rest of your design, the Tailwind scale generator builds them from a single color.

Where to use CSS animated gradient backgrounds

Animated gradients work best as a quiet layer behind content. These are common places to use them:

• Hero sections: a slow 12 to 20 second loop adds depth to a landing page header.
• Buttons and badges: a short, subtle loop draws attention to a primary action.
• Cards and banners: low-contrast palettes in the same hue family keep focus on the content.
• Headlines: the editable text demo shows the effect on lettering. For a dedicated tool, try the gradient text generator.
• Loading states: a fast Linear loop can suggest activity behind a placeholder.

If you want soft, blurred color fields instead of linear motion, the CSS mesh gradient generator is a better fit.

Animated gradient tips and common mistakes

• Too many colors: three or four stops usually look cleaner than eight. Muddy transitions often come from stops that are far apart in hue.
• Loop too fast: under 4 seconds can feel restless. Try 8 to 15 seconds for backgrounds.
• Forgetting the background size: without an oversized background-size, the position change has nothing to reveal, so nothing visibly moves. Keep the generated pair together.
• Animating huge areas: animating background-position makes the browser repaint the element on each frame. Use it on one hero or card, not every section, and test on a mobile device.
• Clashing palettes: start from related colors. The color harmonies generator and the color palette randomizer can supply stops that already work together.

Copy, download and share your animated gradient CSS

Once the preview looks right, you have several ways to take the result with you. Copy CSS and Copy Tailwind put the code on your clipboard. Download CSS saves a stylesheet file, and HTML demo downloads a page you can open and test.

Share link copies a URL that restores your colors, angle, speed, type, motion, size and easing, so you can send a design to a teammate or return to it later.

For a static gradient without animation, use the CSS gradient generator and keep this page for motion.