Instant CSS
Tools
Templates
Components
Learn
More
Gradient Shift
Animation
Animated gradient background that flows continuously.
Reset to Default
HTML
Copy HTML
<div class="gradient-shift">Animated Gradient</div>
CSS
Copy CSS
.gradient-shift { padding: 18px 32px; background: linear-gradient(135deg, #4f46e5, #ec4899, #f59e0b, #10b981, #4f46e5); background-size: 300% 300%; color: white; border-radius: 12px; font-family: sans-serif; font-weight: 700; animation: gradientShift 6s ease-in-out infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
Live Preview
Animated Gradient
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.