How do I use the generated CSS in my project?

Click 'Copy CSS' and paste the snippet into your stylesheet. Apply the class (or the inline styles) to any element. The animation loops automatically — no JavaScript required.

Is this tool free to use?

Yes, completely free. There is no account, no limit, and no watermark. All processing happens in your browser, so nothing is sent to a server.

What does the background-size trick do?

The animation works by making the background gradient larger than the element (e.g., 400% 400%) and then shifting the background-position through keyframes. This creates the illusion of a flowing, animated gradient without needing JavaScript.

Can I use a radial (circular) gradient?

Yes — switch the gradient type to 'Radial' using the toggle. The animation shifts the background-position of the radial gradient, creating a pulsing colour effect.

How many colors can I add?

Up to 5 color stops. You need at least 2 for the animation to work. Click 'Add Color' to insert another stop, and the × button to remove one.

Free CSS Gradient Animator

Create
Animated CSS Gradients

Pick your colors, set the animation speed and direction, preview it live, then copy the ready-to-use CSS keyframe code. No account, no install — runs 100% in your browser.

🎨

Visual Color Editor

Add up to 5 color stops with native color pickers. Drag to reorder. Instant live preview as you change anything.

⚡

Smooth Keyframe Animation

Control animation duration, direction, and gradient type (linear or radial). The gradient shifts through your colors on a seamless loop.

📋

Copy-Ready CSS Code

Outputs a complete CSS snippet with @keyframes, background-size, and animation shorthand — paste it directly into your project.

Gradient Type

Direction

Animation Speed — 6s

FastSlow

Color Stops (3/5)

#6366f1

#a855f7

#ec4899

CSS Output

.animated-gradient {
  background: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
  background-size: 400% 400%;
  animation: gradientShift 6s ease infinite;
}

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

Frequently Asked Questions

Everything you need to know about CSS Gradient Animator.

CreateAnimated CSS Gradients

Visual Color Editor

Smooth Keyframe Animation

Copy-Ready CSS Code

Frequently Asked Questions

Create
Animated CSS Gradients