Why can I not animate gradient colour stops directly?

CSS cannot interpolate between gradient colour stop values with transition or animation. The workaround is to animate background-position over a larger-than-element gradient, creating the illusion of colour movement.

How do I control animation speed?

Adjust the duration in the animation property. animation: gradientShift 4s ease infinite is faster; 15s is slower. Use ease or ease-in-out for the smoothest effect.

Can I pause the animation on hover?

Yes: .element:hover { animation-play-state: paused; }

Does CSS gradient animation affect performance?

Background position animation is GPU-accelerated in most browsers and is generally performant. For critical performance pages, test on target devices and consider using will-change: background-position.

Can I animate a radial gradient?

The background-position technique works with radial gradients too. Set background-size larger than the element and animate background-position to shift the radial gradient's effective centre.

Browse tools

Free · Fast · Privacy-first

CSS Gradient Animation — Moving Gradient Backgrounds

Animated gradients create dynamic, attention-catching backgrounds without JavaScript. FixTools generates CSS keyframe animations for gradient backgrounds using the background-position technique — the most widely supported approach to gradient animation in CSS.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Generates @keyframes animation for moving gradients

🔒

Uses the background-position technique for smooth animation

✨

Configurable animation speed and direction

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Generate animated gradient CSS: background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientShift 8s ease infinite; with the matching @keyframes gradientShift block.

How It Works

Step-by-step guide to css gradient animation — moving gradient backgrounds:

1
Choose 3-4 gradient colours
Animated gradients look best with 3 or 4 distinct colours. Choose your palette.
2
Set gradient direction
Use 270deg or 45deg for horizontal/diagonal movement. The animation effect works by shifting the background-position across an oversized gradient.
3
Set background-size
Set background-size: 400% 400% (or larger). This creates the oversized gradient that the animation moves across.
4
Add the animation
Add animation: gradientShift 8s ease infinite and the @keyframes block that moves background-position from 0% 50% to 100% 50% and back.
5
Copy the complete CSS
Copy both the element styles and the @keyframes rule. Both are required for the animation to work.