Layered background gradient drifts behind a static foreground composition — three motion mechanics for ambient hero spaces: a slow drift, a pulse-and-settle, and a long horizontal sweep. Foreground content stays put; only the background layers move.
Background-position reveal · static viewport
Three production-realistic ways to animate a background-image inside a stationary viewport — a horizontal scene pan, a vertical tape, and a two-layer parallax that uses multi-background-image with per-layer durations to create depth from a single element.
X-axis pan · landscape reveal
A wide repeating gradient strip pans horizontally inside a fixed viewport. Background-size is wider than the viewport so the background-position cycle (0% → 100%) reveals more of the scene over time. Classic route-map / landscape banner pattern.
Y-axis pan · conveyor strip
A vertically repeating pattern slides upward (or downward) inside the same fixed viewport. Useful for conveyor belts, ticker columns, and any vertical-flow brand surface. The repeat unit is sized so the seam returns cleanly at every cycle.
Multi-layer · depth-of-field
Two background images stacked with multi-background syntax, each panning at a different rate so the closer layer (foreground specks) sweeps faster than the farther layer (atmospheric streak). All from a single element — no JavaScript, no extra DOM nodes.
A moving background reveal keeps the viewport and foreground still, then animates background-position on an oversized image layer inside the clipped box.
1<figure class="moving-bg-reveal"><figcaption>Route preview</figcaption></figure><style>.moving-bg-reveal {7position: relative;isolation: isolate;overflow: hidden;display: grid;place-items: end start;width: min(100%, 30rem);aspect-ratio: 16 / 9;margin: 0;border-radius: 18px;background: #0e1a2c;}18.moving-bg-reveal::before {content: "";position: absolute;inset: 0;z-index: -1;background-image:linear-gradient(90deg, rgba(5, 8, 16, .22), rgba(5, 8, 16, .58)),repeating-linear-gradient(100deg,transparent 0 22px,#67e8f9 22px 26px,transparent 26px 72px,#34d399 72px 78px,transparent 78px 132px);31background-size: 260% 100%;background-position: 0% 50%;33background-repeat: no-repeat, repeat-x;animation: moving-bg-reveal-recipe-pan 9s linear infinite;}36.moving-bg-reveal::after {content: "";position: absolute;inset: 0;pointer-events: none;background: linear-gradient(90deg, rgba(0,0,0,.5), transparent 14%, transparent 86%, rgba(0,0,0,.5));}43.moving-bg-reveal figcaption {position: relative;margin: 1rem;padding: .55rem .75rem;border-radius: 999px;color: #f8fafc;background: rgba(15, 23, 42, .72);border: 1px solid rgba(255, 255, 255, .16);font: 700 .9rem/1.1 ui-sans-serif, system-ui;}@keyframes moving-bg-reveal-recipe-pan {from { background-position: 0% 50%, 0% 50%; }to { background-position: 100% 50%, 100% 50%; }}57@media (prefers-reduced-motion: reduce) {.moving-bg-reveal::before {animation: none;background-position: 50% 50%, 50% 50%;}}</style>
Put text on a stable surface or overlay and test the worst color position. Moving backgrounds change contrast over time, so bare text can become unreadable during part of the loop.
Moving the whole card with transform drags the "Label" off-axis with the stripes. Animating background-position only slides the paint inside a still box — the label and the box edges never move.
Use background-position when the box and foreground must stay still while the image inside the box moves. Use transform when the whole layer can move independently without carrying text or layout with it.
Same background-position 0% → 100% animation on both cards. background-size: 100% has no off-canvas runway — the stripes look almost frozen because the pattern starts and ends at the same visible spot. 240% gives the pattern a wider canvas, so each cycle reveals fresh stripes scrolling in from the right.
Make the background larger than the viewport and ensure the start and end positions are compatible. Repeating patterns need a repeat unit that lands cleanly at the final background-position.
Put text on a stable surface or overlay and test the worst color position. Moving backgrounds change contrast over time, so bare text can become unreadable during part of the loop.
Stop the background-position animation and hold a representative frame. Do not remove the foreground content or change the layout; only the background travel should disappear.
Layered background gradient drift behind a static foreground. Foreground content stays put; only the background layers move via transform + opacity (never layout properties like left or top) so the motion stays GPU-cheap.
Reach for moving-background reveals on hero sections, page intros, and dashboard headers that want a sense of motion without committing to a full animation. Skip them on text-heavy reading surfaces — ambient peripheral motion is fatiguing during long sessions.
Stack two or three absolutely-positioned background layers behind the foreground content. Each layer holds a radial or conic gradient and animates transform: translate3d(x, y, 0) on a long loop (15–30 seconds). The translate3d form is critical — it forces compositor layer promotion so the animation runs on the GPU rather than the main thread. Use different durations and easing curves per layer so the layers never align at the same phase, which would produce a visible repeat. The foreground sits above with position: relative + a high z-index.
Animating background-position instead of transform drops the animation to the CPU and causes jank under load. Don’t apply will-change: transform to every layer permanently — it pins them in GPU memory; add only when the animation is actively running, and remove on unmount or off-screen. Backgrounds with backdrop-filter stacked above the moving layers can produce ghosting on Safari iOS — either bake the blur into the layer image or accept the artifact below the iOS 17 floor.
Background drift in peripheral vision is exactly the kind of motion the prefers-reduced-motion: reduce media query targets. Pin all background layers at their starting positions (drop the animation) under reduced motion. The moving layers should remain decorative — do not rely on motion to communicate state. Verify foreground text contrast against the worst-case (darkest / lightest) frame of the background animation, not just the rest position.
Moving backgrounds should animate transform on layers, not layout or gradient stops. The foreground content stays still while large background layers drift slowly enough to create atmosphere without stealing focus.
The worst frame matters more than the rest frame. Test foreground contrast when the brightest and darkest layers overlap, and turn the motion off under reduced motion while preserving the designed color field.