Animated CSS Gradient Generator - Automatic Keyframes
Create animated CSS gradients with automatic keyframes.
Aperçu
Paramètres
Code CSS
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
linear-gradient(-45deg, #667eea, #764ba2, #f093fb);
animation: gradient-shift 5s ease infinite;
background-size: 400% 400%;
}Supported formats
How it works
Define your start and end colors
Choose animation speed and type
Preview the effect in real-time
Copy CSS code with @keyframes
Privacy guaranteed
Local generation, no data transmitted.
Gradient animations for modern websites
Animated gradients add dynamism and life to your interfaces. Perfect for hero sections, loading pages, form backgrounds and hover effects. Our generator creates pure CSS animations, no JavaScript, performant on all devices. Compose an animated gradient with CSS keyframes, smooth transition and infinite loop to energize a button, hero or background without any JavaScript dependency. Adjust hue, saturation, lightness and opacity with real-time preview, then copy clean CSS code (HEX, RGB, HSL) sRGB-compliant for your linear, radial gradients, colored shadows and modern filters.
Color morphing animation
Create fluid transitions between multiple colors. The gradient continuously evolves, moving from one palette to another. Hypnotic effect perfect for creative landing pages.
Background scroll animation
The gradient moves gently in one direction, creating a subtle movement effect. Ideal for sections that need discrete but engaging animation.
Optimized CSS @keyframes code
Generated code uses CSS best practices for smooth animations: will-change to prepare GPU, enlarged background-size for smooth scrolling, and custom timing functions. Compatible with all modern browsers.
Accessibility and prefers-reduced-motion
Our animations respect accessibility preferences. Code includes @media (prefers-reduced-motion: reduce) to automatically disable animations for motion-sensitive users.
Advanced animation customization
Control every aspect: duration (from 1s to 30s), timing function (ease, linear, custom bezier), start delay, iteration count (infinite or limited), and direction (normal, reverse, alternate).
Integration in your web projects
Copy CSS code and paste it into your stylesheet. Code is self-contained with no dependencies. Works with React, Vue, Angular, Svelte, static HTML and any other framework or CMS.
Performant CSS animations for the web
Gradient animations only use the background-position property, making them extremely performant (60 fps). Avoid durations that are too short (<3s) which can tire the user. Respect prefers-reduced-motion for accessibility.