Animated gradient
Also called moving gradient background, gradient animation, or shifting gradient
A color gradient that slowly shifts across a surface on a loop, often used behind a hero or call to action to add warmth and motion.
import { motion, useReducedMotion } from 'motion/react';
const DRIFT_SECONDS = 12;
export function SignUpBanner() {
const reduceMotion = useReducedMotion();
return (
// The gradient is 4x the panel's size, so sliding its position shows a
// slow flow of color. The 700 shades keep white text above 4.5:1.
<motion.section
animate={
reduceMotion
? undefined
: { backgroundPosition: ['0% 50%', '100% 50%'] }
}
transition={{
duration: DRIFT_SECONDS,
ease: 'easeInOut',
repeat: Infinity,
repeatType: 'mirror'
}}
className='rounded-3xl bg-linear-135 from-blue-700 via-purple-700 to-pink-700 bg-size-[400%_400%] p-10 text-white'
>
<h2 className='text-2xl font-bold tracking-tight'>
Start building for free
</h2>
<p className='mt-2 text-white/90'>
No credit card needed. Publish your first app today.
</p>
<a
href='/signup'
className='mt-6 inline-block rounded-full bg-white px-5 py-2.5 text-sm font-medium text-blue-700'
>
Create an account
</a>
</motion.section>
);
}Put an animated gradient behind the sign-up call to action: a 135° linear gradient of blue, purple, and pink at 400% size that drifts back and forth over 12s with ease-in-out. Keep the white text at 4.5:1 contrast or better at every point in the loop, round the panel's corners to 24px, and stop the animation when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Animated gradient?
An animated gradient blends two or more colors and slowly moves them, so the surface seems to flow from one hue to the next. It gives a hero, a banner, or a sign-up card a sense of energy without adding shapes or images.
The classic CSS approach makes the gradient larger than its box with background-size: 400% 400% and animates background-position over 10 to 20 seconds. That repaints the area every frame, which is fine for one banner. For large areas or many copies, put the gradient on an oversized layer and move it with transform, which the GPU handles more cheaply.
Keep the motion slow enough that people notice it only after a moment; fast color changes distract and can be uncomfortable. Check that text on top stays readable at every point in the loop, and freeze the gradient under prefers-reduced-motion.
Often confused with
- Mesh gradient
- A mesh gradient blends colors from several points into soft, organic shapes and is often still. An animated gradient is any gradient set in motion.
- Aurora background
- An aurora background layers blurred, wavy bands of color that drift like the northern lights, one specific look an animated gradient can create.
Related terms
All termsMesh gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
Aurora background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
Border beam
A short streak of light that travels around the edge of a card or button on a loop, drawing attention to it.
Gradient text
Text filled with a color gradient instead of a solid color, made by painting a gradient background and clipping it to the shape of the letters.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.