Animated Gradient Backgrounds

Stripe Gradient forms broad flowing folds of colour, and Shader R blends light and dark fields with an orange accent and film grain. Halo Drift spreads glass light across the canvas in a six second loop. Gradient Dots lights a regular dot grid with moving colour fields. Iridescent Flow, Iridescent Petal, Floating Glass, Color Eclipse and Phosphor Flow are richer studies in liquid metal, petals, glass sheets, ribbons and volumetric light.

Every background exposes its own controls. All of them adjust speed, scale and exposure, and each has palette or colour controls so the gradient can match your brand. Stripe Gradient adds flow depth, softness, angle and four editable colours. Gradient Dots adds dot spacing, dot radius, shimmer, hue, saturation and brightness.

Export a background as a self contained HTML file or as a Svelte or React component. The animation is drawn by code in the browser, so there is no video file to host and the gradient stays sharp at any size.

Slow the motion and lower the glow when a headline sits on top, and check contrast at the brightest moment of the loop, not only the first frame. Keep the animated area to the hero or one section rather than the whole page, and pause it for visitors who ask for reduced motion.