OneTaskBy Tim King · Updated
Moving Background
Endless Panning Stripes, Grid or Dot Patterns in Any Direction, Pure CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Moving Background works
A moving background slides a repeating pattern across a section forever, so stripes, a grid or dots drift slowly behind your heading. Pick the pattern, direction, size and speed, and copy the HTML and CSS. The loop is seamless and needs no script.
A gently moving pattern adds life to a banner, sale strip or hero without the weight of a video. Because it is a CSS gradient, it stays sharp at every size and adds almost nothing to the page.
How the moving background loops
The pattern is a gradient on a ::before layer with background-size set to one tile. A
keyframe animation moves background-position by exactly one tile, then starts again. The end
frame looks identical to the first, so the jump back is invisible and the pattern seems to move
without end. The loop time sets how long one tile takes to pass.
Motion and readability
The pattern sits at low strength behind the text, and the animation is switched off for visitors who set their device to reduce motion, leaving a still pattern. Keep loops slow on large sections so the movement stays calm.
FAQ
Why does my moving background jump at the end of each loop?
The distance the animation travels must equal the tile size exactly. If you change
background-size in the CSS, change the end background-position in the keyframes to match.
Is animating background-position bad for performance?
It makes the browser repaint the layer each frame, which is fine for a banner or hero on modern devices. For a full-page effect, keep the section short or the pattern subtle, and test on a low-end phone.
Can I reverse the direction?
Yes. Flip the sign of the values in the keyframe background-position, or add
animation-direction: reverse to the pattern layer to run the loop the other way.
Can I combine the pattern with a gradient background?
Yes. Replace the solid background colour on the section with a gradient. The moving pattern layer sits on top of it, so the gradient shows through the gaps in the stripes, grid or dots.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Grid Background
Faded grid-line background for hero sections, pure CSS.
Dot Background
Faded dot-grid background for hero sections, pure CSS.
CSS Pattern Generator
Repeating background patterns built from CSS gradients, no images.
Animated Gradient
Make a smoothly shifting gradient background in pure CSS.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.