Back to Motion Prompt examples
Landing page & web effects · #23
Animated gradient
Background colours keep drifting and blending. Behind the headline, soft patches of orange, light orange, blue and light blue drift in circles and keep blending differently.
Loading, navigation & ambient loopsgradientanimated-gradientmesh-gradientbackgroundheroambientloop
Full motion specification
How the movement works
Use it to add movement and colour behind a hero or heading without using a photo.
- 01Base colour #FFF1EB, with four radial gradients on top (centre colour → transparent at the edge, each at 0.85 opacity).
- 02Orange (radius 230), light orange #FFB08F (210), blue (240), light blue #9DB6FB (200).
- 03Each centre travels an ellipse once per 4.8 s (x radii 70, 60, 80, 50; y radii 30, 40, 30, 35; start angles 0, 2.1, 4.2, 1.0 rad).
- 04A white headline (34 px) and a button sit on top; only the gradient moves.
Prompt
Give the hero an animated gradient background: orange and blue slowly blending, one loop every 10 s.