Animated Gradients
Create stunning animated gradients for your web projects
Animation
Gradient Shift
Duration
8s
Speed
1x
Easing
Ease
Colors
1x
CSS
.animated-gradient {
position: relative;
background: linear-gradient(45deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
background-size: 200% 200%;
animation: gradient-shift 8s ease alternate infinite;
overflow: hidden;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}Space: Play/Pause • R: Random • F: Fullscreen • P: Present • T: Text