Animated Website Backgrounds: Free Examples, CSS and Video

An animated website background is a moving layer behind a page’s main content. It can be a CSS gradient, a finished video loop, a Canvas effect or an interactive WebGL scene. Start with the visitor’s task: the right background helps explain the page while the headline, navigation and next action remain easy to use.

For a quick starting point, browse animated and moving backgrounds on Scrollhaus. The collection separates video, still-image and interactive resources. A still image will not animate, and a video that looks three-dimensional is not an object a visitor can rotate.

Choose CSS, video or interactive 3D

“Motion background” describes a visual role rather than a file format. Choose the medium after deciding whether the scene needs to loop, follow a pointer or respond to scrolling. Avoid combining all three simply because a builder can generate them.

Four examples you can inspect before you build

Use a real preview with your proposed headline. Watch the complete loop, including its busiest and brightest frames, then check the same composition on a phone. These examples offer different kinds of handoff:

• CSS atmosphere: open the CSS-only moving background example. It uses no external video or JavaScript and includes a labelled pause checkbox. Try the control with a keyboard, then inspect the readable still state.
• Abstract video: preview Liquid High Fidelity. Its video page exposes the MP4 and available HTML and React source links. Watch the footage before deciding where your text can sit.
• Technology-themed video: preview Bio Tech Computing Interface. Compare its visual detail with your actual product message. A busy scene may suit a demonstration panel better than a text-heavy hero.
• A complete motion-led page: inspect the free LOOPLINE website build when you need more than a background. Review section structure, navigation and the available build kit together.

Scrollhaus currently includes 66 free video backgrounds, 272 still images and a separate collection of 64 interactive backgrounds, 20 of which are free. The interactive free selection includes 14 Vanta scenes. The interactive collection and the 3D background guide help distinguish real interaction from rendered footage.

What “free animated backgrounds” includes

A free preview, a downloadable media file and permission for commercial use are different things. Check the licence for the individual asset and its source. Scrollhaus’s OpenHero collection credits the upstream project; its application-code licence does not automatically grant unrestricted rights to every image or clip. Vanta’s code is available under its own MIT licence.

For a client website, keep the resource URL, licence and acquisition date with the project. Check fonts, photographs, music and video separately. If you cannot establish the rights to a particular file, choose another asset before presenting the build as ready to publish. Our Template Licence explains the terms for Scrollhaus resources; third-party resources retain their own conditions.

A small CSS animated background with a pause control

For soft colour movement, use a decorative layer inside a section that already has a stable size. Keep the headline and call to action in normal HTML above it. The complete working example contains the colour layers and layout. Its key behaviour is:

.ambient-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 32rem;
}
.ambient-layer {
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  animation: drift 16s ease-in-out infinite alternate;
}
#pause:checked ~ .ambient-layer { animation-play-state: paused; }
@keyframes drift {
  from { transform: translate(-3%, -2%) rotate(-4deg); }
  to { transform: translate(3%, 2%) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-layer { animation: none; }
}

The pause checkbox must appear before the animated layer at the same nesting level for this sibling selector to work. Hide the decorative layer from assistive technology and leave the control labelled. Transforming the background layer lets the surrounding content retain its layout; it does not guarantee good performance on every device.

Add a video background without losing the first screen

Choose a sharp poster that works as a complete still composition. Reserve the section’s height and place the video behind the content with an overlay where necessary. Use muted inline playback for decorative video, and handle a rejected play request by retaining the poster and a usable play control. Browser policy can block autoplay even when the markup requests it.

Check the mobile crop against the actual subject. Do not stretch the footage or lower its source quality to disguise a performance problem. Prioritize the visible hero, defer later media and pause work outside the viewport or while the tab is hidden. Measure the deployed page on a representative phone; a smooth desktop preview is not a mobile performance result.

For automatic motion lasting more than five seconds alongside other content, provide a way to pause, stop or hide it where required by W3C’s Pause, Stop, Hide guidance. Also respect the reduced-motion preference. A visitor should not have to watch an animation to read the offer or reach a button.

Use a specific background brief in an AI builder

Supply the chosen asset rather than asking the model to invent one. This starting brief works for a video-based hero; replace both placeholders before using it:

Build a responsive React and TypeScript hero. Keep the heading and primary action in semantic HTML. Use [VIDEO_URL] behind the content with [POSTER_URL] as the readable first state. Preserve the source colours and aspect ratio. Include muted inline playback, a visible pause/resume control and a stable contrast overlay. Show the poster when reduced motion is requested or playback fails. Reserve the hero’s size, keep native page scrolling and do not preload videos in later sections. Do not invent URLs, testimonials or working backend integrations.

For a CSS or WebGL effect, replace the video instructions with the actual technique and fallback. Find more AI website prompts by niche, or use the website design prompt examples to specify the rest of the page.

Why is my animated background not moving?

Finally, test the opening state, middle of the loop, loop join, paused state and failed-load state with the real content. Check keyboard focus, headline contrast, phone scrolling and the primary action in each. Use the motion performance guide for loading and measurement, or browse AI website templates if a complete page structure is the larger problem.

Code walkthroughs: animated gradient backgrounds and animated backgrounds in Next.js.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.