Animated Gradients

Gradient Animator

Create stunning animated gradient backgrounds. Customize colors, speed, and animation type, then export ready-to-use CSS.

Colors
Animation Settings
CSS Code
1.animated-gradient {
2  background: linear-gradient(90deg, #667eea, #764ba2, #6B8DD6, #667eea);
3  background-size: 200% 200%;
4  animation: gradient-animation 3s ease infinite;
5}
6

7@keyframes gradient-animation {
8  0% { background-position: 0% 50%; }
9  50% { background-position: 100% 50%; }
10  100% { background-position: 0% 50%; }
11}
Tailwind Usage
1/* Add to your globals.css or tailwind.css */
2@keyframes gradient-animation {
3  0% { background-position: 0% 50%; }
4  50% { background-position: 100% 50%; }
5  100% { background-position: 0% 50%; }
6}
7

8.animate-gradient {
9  background: linear-gradient(90deg, #667eea, #764ba2, #6B8DD6, #667eea);
10  background-size: 200% 200%;
11  animation: gradient-animation 3s ease infinite;
12}
13

14/* Usage in JSX */
15<div className="animate-gradient w-full h-64 rounded-xl" />