Bring your website backgrounds to life with the CSS Gradient Animator. Add multiple
colors, adjust the animation speed and angle, and copy the pure CSS output instantly.
Try:
Gradient
Type
Angle 135°
Shape
Repeating gradient
Animation
Duration 4s
Timing function
Direction
● Animating
Presets
Live Preview
Click to copy CSS
Loading…
Color Stops
name · #hex · rgb()
Generated CSS
Advertisement
Color Stops
Add as many stops as you want — minimum 2. Each accepts a CSS color name
(coral), hex (#FF7F50), or RGB (rgb(255,127,80)). As you type, a
dropdown suggests matching named colors. Position (%) controls where each stop sits in the gradient.
Gradient Types
Linear — straight angle gradient. Radial — circular or
elliptical from a center point. Conic — sweeps around a center point. Toggle
Repeating to tile the gradient pattern.
Animation Modes
Rotate angle — spins the gradient direction. Color shift —
animates background-position using a 200% background-size trick for a flowing effect. Pulse —
breathes the gradient in and out with opacity. Wave — animates stop positions for a liquid wave
effect.
CSS Output
Copy CSS copies the full ready-to-paste block — selector, gradient,
animation property, and @keyframes. Copy @keyframes copies just the animation
definition if you already have the gradient.
Presets
Six visual presets to jump-start: Sunset, Ocean, Aurora, Fire, Neon, Forest. Each loads
a curated set of colors and a fitting animation type.
Position %
Each stop's position controls where it appears in the gradient. 0% = start,
100% = end. Leaving gaps concentrates transitions. Overlapping positions create hard edges with
no blend.
Advertisement
How to use
Open the tool and enter your data or select options.
Adjust settings to see real-time updates.
Copy the generated result to your clipboard.
Frequently Asked Questions
How does the animation work?
The
tool generates a CSS background with a size larger than 100% and uses CSS keyframes to continuously shift the
background-position.
Does this impact page performance?
While
animating backgrounds is slightly more intensive than animating opacity or transforms, modern browsers handle
simple gradient animations very efficiently.
Can I use transparent colors?
Yes,
you can use rgba() color values to create animated transparent gradients that can overlay other elements.
Did you know?
CSS gradients are technically rendered as images by the browser, which is why they are used in the
background-image property.
Stripe popularized the subtle animated gradient background on their homepage in the late 2010s.
You can create sharp lines in CSS gradients by having two colors stop at the exact same percentage.