Animated website background, free to embed

The light behind this text is the embed itself. Pick a look, copy one snippet (HTML, script or React) and paste it into Framer, Webflow, WordPress, Squarespace, Shopify or your own code.

  • Free for commercial use
  • No badge, no watermark
  • No signup
Get the embed codeCustomize in the editor

Website background animation you can copy and paste

Each look below is the live embed, running in a mock site. Pick one, choose HTML, script or React, and copy. The code works as it is; open the editor to set your own colors first.

Look

<section style="position:relative;overflow:hidden;min-height:560px">
  <iframe
    src="https://backgrounds.supply/tools/animated-background/embed#s=eyJ2IjozLCJwIjp7InNoYXBlIjoia25vdCIsIm1vZGUiOiJzaWxrIiwiZmxpcCI6ZmFsc2UsImNvbG9ycyI6WyIjN2FmN2ZmIiwiIzIyZDNmZiIsIiMwYTliZmYiLCIjMmZkOGE4Il0sImJnIjoiIzAzMDgwYyIsInNhdHVyYXRpb24iOjEsInRoaWNrbmVzcyI6MC40LCJnbG93IjowLjQ1LCJ2ZWlsIjowLjYsInByaXNtIjowLCJwb3NpdGlvbiI6MCwic2NhbGUiOjAuNSwic3RpcHBsZSI6MC40LCJzcGVjayI6MC4xNSwic3ByZWFkIjowLjM1LCJzcGFya2xlIjowLjE1LCJncmFpbiI6MC4wNSwic3BlZWQiOjAuNiwid29iYmxlIjowLjE1LCJzZWNvbmRhcnkiOjAuNCwidHJhdmVsIjowLCJtYXNrIjoibm9uZSIsIm1hc2tTaXplIjowLjUsIm1hc2tTb2Z0IjowLjUsImxlbnMiOiJub25lIiwibGVuc0Ftb3VudCI6MC41LCJ2aWduZXR0ZSI6MC4xNSwiZnJhbWVTaGFwZSI6InJlY3QiLCJtYXJnaW4iOjAsInNlZWQiOjExLCJ3aWR0aCI6MC4zNSwic2hlZXQiOjAuNTUsInNwbGl0IjowLjIsImJhbENSIjowLCJiYWxCWSI6MCwicGhhc2VPZmYiOjAsIm9mZlgiOjAsIm9mZlkiOjAsInJvdGF0ZSI6MCwic3RyZXRjaCI6MSwibWFza1giOjAsIm1hc2tZIjowLCJtYXNrQXNwZWN0IjoxLCJmbGFyZSI6MCwiY29oZXNpb24iOjAsInBpbmNoIjowLjl9LCJtIjoiZ2xvdyIsImYiOnsiZGFyayI6MCwiaW50ZW5zaXR5IjoxLCJyYWRpdXMiOjEsInNvZnRuZXNzIjowLjQsImluZXJ0aWEiOjAuNzJ9fQ"
    title="Animated background"
    loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
  ></iframe>
  <div style="position:relative;z-index:1">
    <!-- your headline and buttons -->
  </div>
</section>

Paste it where your hero goes. The iframe fills the section; your content sits on top.

Change colors and shape in the editor

How to add an animated background to a website

  1. Pick a look

    Choose one of the looks above, or open the editor and pick any of its 128 looks. Change the colors to match your brand, the shape of the light, the speckle and the speed, and pick a pointer effect such as follow, glow or ripple.

  2. Copy the snippet

    Copy the HTML embed, the script tag or the React component. In the editor the same code is under Export, then Code. The look is packed into the link itself, so there is nothing to sign up for and no key to manage.

  3. Paste it behind your hero

    Paste the code where your hero section goes, in a custom code or HTML block. The animation fills the box you give it and your headline and buttons sit on top. Publish, and it runs live in your visitors' browsers.

Add it to Framer, Webflow, WordPress, Squarespace or Shopify

Every builder that takes custom HTML can show the embed. Use the HTML embed snippet in these steps.

  • Framer

    1. Insert an Embed (in the Insert menu, under Utility) and set its type to HTML.
    2. Paste the HTML embed snippet, or set the type to URL and paste only the embed link from the src.
    3. Set the Embed to Absolute position, pin it to all four sides of your hero and send it to the back.

    Embeds play in Framer's preview and on the published site.

  • Webflow

    1. Give your hero section position: relative.
    2. Drag a Code Embed element into it and paste the HTML embed snippet.
    3. Move the embed to the top of the section so your headline stacks above it.

    The Code Embed element needs an active Site plan or a paid Workspace plan. Check the result in Preview or on the published site.

  • WordPress

    1. In the block editor, add a Custom HTML block (in Elementor, an HTML widget) and paste the HTML embed snippet.
    2. Put your headline and buttons inside the snippet's inner div, or below it.
    3. Preview, then update the page.

    WordPress.com sites need a plan that allows custom HTML with iframes.

  • Squarespace

    1. Edit the page and add a Code block where the hero goes.
    2. Paste the HTML embed snippet and turn off Display Source.
    3. Save. Squarespace runs code blocks on the live site, not always in the editor preview.

    Code blocks with embeds depend on your Squarespace plan.

  • Shopify

    1. Go to Online Store, then Themes, then Customize.
    2. Add a Custom Liquid section (Custom HTML in some themes) where the hero goes.
    3. Paste the HTML embed snippet and save.

  • Any HTML site

    1. Paste the HTML embed or the script tag in your page where the hero goes.
    2. Give the section a height, or let the min-height in the snippet set it.
    3. Put your content in the inner div so it sits above the animation.

    The script version adds the embed for you and resizes it to fill its div.

Aurora background in React, CSS or plain HTML

The Polar veil look, three ways. The React and HTML versions are the live embed with its speckle and pointer effects; the CSS version is a lighter fallback you can own outright, with no WebGL and no script.

Live embed
export function AnimatedBackground({ children, minHeight = 560 }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", minHeight }}>
      <iframe
        src="https://backgrounds.supply/tools/animated-background/embed#s=eyJ2IjozLCJwIjp7InNoYXBlIjoic3dvb3NoIiwibW9kZSI6InJpYmJvbiIsImZsaXAiOmZhbHNlLCJjb2xvcnMiOlsiIzNkZmZjMiIsIiMxOWI4ZmYiLCIjN2E1Y2ZmIl0sImJnIjoiIzA0MDYwYSIsInNhdHVyYXRpb24iOjEsInRoaWNrbmVzcyI6MC4zNSwiZ2xvdyI6MC40NSwidmVpbCI6MC41LCJwcmlzbSI6MC4xNSwicG9zaXRpb24iOjAsInNjYWxlIjowLjUsInN0aXBwbGUiOjAuNiwic3BlY2siOjAuMzUsInNwcmVhZCI6MC40NSwic3BhcmtsZSI6MC40NSwiZ3JhaW4iOjAuMjUsInNwZWVkIjoxLCJ3b2JibGUiOjAuNSwic2Vjb25kYXJ5IjowLjUsInRyYXZlbCI6MC40LCJtYXNrIjoibm9uZSIsIm1hc2tTaXplIjowLjUsIm1hc2tTb2Z0IjowLjUsImxlbnMiOiJub25lIiwibGVuc0Ftb3VudCI6MC41LCJ2aWduZXR0ZSI6MC4zNSwiZnJhbWVTaGFwZSI6InJlY3QiLCJtYXJnaW4iOjAsInNlZWQiOjMsIndpZHRoIjowLjQ1LCJzaGVldCI6MC41NSwic3BsaXQiOjAuNCwiYmFsQ1IiOjAsImJhbEJZIjowLCJwaGFzZU9mZiI6MCwib2ZmWCI6MCwib2ZmWSI6MCwicm90YXRlIjowLCJzdHJldGNoIjoxLCJtYXNrWCI6MCwibWFza1kiOjAsIm1hc2tBc3BlY3QiOjEsImZsYXJlIjowLCJjb2hlc2lvbiI6MCwicGluY2giOjB9LCJtIjoiZ2xvdyIsImYiOnsiZGFyayI6MCwiaW50ZW5zaXR5IjoxLCJyYWRpdXMiOjEsInNvZnRuZXNzIjowLjQsImluZXJ0aWEiOjAuNzJ9fQ"
        title="Animated background"
        loading="lazy"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
      />
      <div style={{ position: "relative", zIndex: 1 }}>{children}</div>
    </section>
  );
}

The Polar veil look as a React component. No npm package, nothing to install.

Will an animated background slow down your site?

A live background costs some graphics work on your visitor’s device, so the embed is built to spend as little as it can:

  • Lazy and isolated.The iframe loads with loading="lazy" and runs on its own page, so its code and styles never touch yours, and your headline stays the first thing that paints.
  • Paused when nobody is looking. Nothing is drawn while the embed is scrolled off screen or the tab is in the background.
  • Adapts to the device. It draws at a capped number of pixels and lowers its resolution further if frames come in slowly, so older phones keep scrolling smoothly.
  • Reduced motion respected. Visitors who ask their system for less motion get one still frame of the look instead of an animation.
  • A safe fallback.Browsers without WebGL 2 show the look’s background color. Set the same color on your section so there is never a flash while it loads.

For a hero above the fold, drop loading="lazy" from the hero embed so it starts at once, and keep it lazy for embeds further down the page.

Live embed or a looping video background?

Both work. The embed is live, sharp at any size and reacts to the pointer; a video file is self-hosted and plays anywhere a video plays. Export a seamless MP4 or WebM loop from the editor (free up to 1080p) and use this markup. The guide to video backgrounds for websites covers file size and posters in depth.

<section style="position:relative;overflow:hidden;min-height:560px">
  <video autoplay muted loop playsinline poster="/hero-poster.webp"
    style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
    <source src="/animated-background.webm" type="video/webm" />
    <source src="/animated-background.mp4" type="video/mp4" />
  </video>
  <div style="position:relative;z-index:1"><!-- your content --></div>
</section>

Replace the file names with your exported loop. WebM first for smaller files, MP4 as the fallback.

Free for commercial use, no badge, no watermark

Every free look is free to embed on personal, client and commercial sites, including shops, SaaS landing pages and portfolios. The embed draws only the light: no badge, no link back, no watermark, and no attribution needed. What you may not do is resell or redistribute the looks or exports as a product of their own.

Free video and PNG exports go up to 1,920 px on the long edge. Backgrounds Supply Pro adds 4K loops and 4K to 8K stills from every look, plus the full library of backgrounds, including the ready-made MP4 clips. Want to learn the technique instead? Read how to make an animated background, or build a moving gradient in Gradient Lab, which has its own embed code.

FAQs

Animated website backgrounds: embedding, speed, builders and license

  • Pick a look, copy the HTML embed snippet and paste it where your hero section goes, in any block that accepts custom HTML. The snippet is a section with the animation filling it and an inner div for your headline and buttons, so your content sits on top. There is no account, API key or package to install.

  • Yes. Every free look can be embedded on personal, client and commercial sites, with no badge, no watermark, no link back and no attribution. You may not resell or redistribute the looks or the exported files as a product of their own.

  • Very little. The embed runs in its own iframe, loads lazily, draws nothing while it is off screen or the tab is hidden, caps its resolution and lowers it further on slow devices. Your text still paints first. For a hero at the top of the page, remove loading="lazy" so the animation starts at once.

  • Insert an Embed from the Utility section, set its type to HTML and paste the HTML embed snippet, or set it to URL and paste only the embed link. Make the Embed absolute, pin it to all four sides of the hero and send it to the back so your text stays on top.

  • Set your hero section to position: relative, drag a Code Embed element into it and paste the HTML embed snippet, then move the embed to the top of the section. Webflow's Code Embed element needs an active Site plan or a paid Workspace plan, and it shows in Preview or on the published site.

  • Yes. In the block editor add a Custom HTML block, or in Elementor an HTML widget, and paste the HTML embed snippet. Put your content inside the snippet's inner div. On WordPress.com you need a plan that allows custom HTML with iframes.

  • Yes. On Shopify open Online Store, Themes, Customize and add a Custom Liquid section with the snippet. On Squarespace add a Code block with the snippet and turn off Display Source; code blocks may only run on the live site, and what they allow depends on your plan.

  • Copy the React snippet: a small AnimatedBackground component that renders the embed behind its children. Wrap your hero in it. It has no dependencies, so it works in Next.js, Remix, Vite and Gatsby, and on the server it renders as a plain iframe.

  • Yes. The CSS only snippet on this page draws an aurora with three blurred radial gradients that drift with a keyframe animation and stop for reduced motion. It needs no script or WebGL, but it is softer than the embed, with no speckle, rays or pointer effects.

  • Use the live embed when you want the light sharp at any screen size and reacting to the pointer, with nothing to host. Use a video file when you need it self-hosted or in a place that cannot load an iframe, such as an email builder or an app. The editor exports both: free video loops up to 1080p, 4K with Pro.

  • Yes, in any browser with WebGL 2, which includes Safari on iOS 15 and later and current Chrome on Android. On phones it draws fewer pixels to save battery, and the page still scrolls normally when a finger moves over it.

  • The embed shows the look's background color instead of the animation, so the section never breaks. Set the same color as the background of your section and nobody sees a difference while it loads.

  • Yes. Anything inside the snippet's inner div sits above the animation and stays fully clickable. Pointer effects such as follow or ripple react wherever the pointer is over the light and not over your content.

  • Yes. Open the look in the editor, set 2 to 4 colors and a background color, or pick one of 16 palettes, then open Export and Code. The new colors are packed into the snippet's link, so the copied code always shows exactly what you made.

  • The Animated Backgrounds collection has finished MP4 clips that come with Backgrounds Supply Pro, a one-time purchase that includes a commercial license and the whole library. For video loops of these looks, export them free from the animated background maker.

More from the animated background maker

Explore more: aesthetic wallpapers, moving backgrounds, free gradient wallpapers, gradient backgrounds, cool backgrounds, free aesthetic backgrounds.