Seven animated backgrounds for heroes and banners: a slowly flowing gradient, drifting aurora blobs, a twinkling starfield, a synthwave grid floor, layered SVG waves, rising bubbles and a dot matrix that breathes, all with no images and all switched off for reduced motion.
A large four-colour gradient slowly pans behind a hero, a calm movement that adds life without competing with the text. Only background-position animates, over fifteen seconds, and the text sits on top with enough contrast at every point.
View code
<section class="bga1"><h3>Ship faster</h3><p>Everything your team needs, in one place.</p></section>
Three blurred colour blobs drift on slow, differently timed loops behind a dark panel, giving an aurora glow. filter: blur on the blobs, not the text, keeps the heading sharp, and the blobs are aria-hidden decoration.
Two layers of tiny stars drawn with repeating radial gradients, each twinkling by fading its opacity on a different cycle. The whole sky is two pseudo-elements, with no images and no extra markup.
A neon grid floor recedes to the horizon and scrolls toward the viewer, the synthwave look. The grid is two linear-gradient line patterns on a plane tilted with rotateX, and the motion is a background-position loop exactly one grid square long.
Two wave shapes in an inline SVG slide sideways at different speeds along the bottom of a section. Each wave path is twice the width of the view and seamless, so translating it by half its width loops perfectly.
Bubbles rise from the bottom of the panel at different sizes, speeds and starting points, all driven by one keyframe and three custom properties per bubble. The bubbles are list-free spans hidden from assistive technology.
A dot grid made with one radial-gradient whose dot size swells and shrinks in a slow breath, behind a centred heading. Animating background-size moves every dot at once, and a radial mask fades the pattern out toward the edges.
View code
<section class="bga7"><h3>Built on data</h3></section>
A background should never compete with the text on top. Loops of eight seconds or more, low contrast between colours and small movements keep it in the background where it belongs.
Check contrast at every moment
Text over a moving background must stay readable at the worst frame, not just the first. Test the lightest and darkest point of the animation against the text colour.
Cheap to animate
Move gradients with background-position, shapes with transform and fades with opacity. Blurred blobs are fine because the blur is applied once and the layer is only moved.
Pause when asked
Background motion is decoration, so it is the first thing to stop under prefers-reduced-motion. The still state should still look finished.
Frequently asked questions
Do animated backgrounds drain battery?
Continuous animation keeps the GPU busy. Pause it when the section is off screen with an IntersectionObserver if it is large.
Can I use these behind a whole page?
Yes; set the section to cover the viewport with position: fixed and a negative z-index, and keep the motion subtle.
Are any images used?
No. Every background is CSS gradients, pseudo-elements or a small inline SVG.