Skip to content

Animated Blob Background

Pure CSS animated background with blurred, morphing color blobs drifting behind a hero headline, with a pause button and reduced-motion support.

Also known as: animated gradient background, blob animation, moving background css, morphing blobs

Pure CSS Backgrounds Responsive Dark #animation #background #blob #gradient #hero

Animated Blob Background live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

An animated gradient background made of soft, morphing color blobs that drift slowly behind your content. It is built with pure CSS plus a tiny script for a pause button, and works well behind landing page heroes, sign-up sections, product launches and "coming soon" pages.

How it works

The root section.abg is a dark, centered grid with isolation: isolate, so its layers stack only inside the section. The first layer, .abg-blobs, holds four span.abg-blob elements. A single filter: blur() on the wrapper (not on each blob) merges the shapes into smooth color clouds and keeps rendering cheap.

Each blob runs two animations at once. abg-morph changes the eight-value border-radius, which makes the outline wobble and reshape, and rotates the blob. abg-drift moves and scales it with the individual translate and scale properties, so the two animations never overwrite each other's transform. Negative animation-delay values on .abg-blob--1 to .abg-blob--4 start every blob at a different point, so the picture already looks lively on the first frame.

Above the blobs, .abg-veil adds a dark radial gradient behind the text for contrast. .abg-content holds the eyebrow badge, heading, text and two buttons. The script listens for click on .abg-toggle in each .abg root and toggles the is-paused class, which sets animation-play-state: paused on the blobs. Without JavaScript the background simply keeps moving.

Customization

  • --abg-c1 to --abg-c4 on .abg: the four blob colors. Use two shades of your brand color for a calmer look.
  • --abg-bg: the base background color that shows between the blobs.
  • --abg-blur: blur radius of the blob layer; 40px gives more defined shapes, 120px a hazy glow.
  • --abg-speed: duration of one morph cycle (the drift takes 1.5 times longer); raise it to 30s for a very slow, ambient motion.
  • --abg-size: blob size, set with clamp() so the blobs scale with the viewport.
  • min-height on .abg: the section height; set it to 100vh for a full-screen hero.
  • Remove .abg-veil if your content sits in its own card and no extra darkening is needed.

Use cases

  • Landing page heroes: soft moving color behind the headline
  • Sign-up and pricing sections: a calm animated backdrop
  • Coming soon and launch pages: motion that keeps a simple page lively

Accessibility

The blob layer and the veil are aria-hidden="true", so screen readers only meet the heading, text and links. The section is labelled by its heading through aria-labelledby. Long-running motion can be stopped with the .abg-toggle button, which reports its state with aria-pressed. With prefers-reduced-motion: reduce all blob animations are removed, the background becomes a still gradient and the pause button is hidden. Buttons and links have a visible amber focus outline, and the white text sits on a darkened area for good contrast.

Usage notes

Several sections can share a page; the script handles each .abg separately. Large blur filters cost GPU time, so avoid stacking many animated sections on one screen.

Animated Blob Background at a glance

Framework
Pure CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
None
Layout
Responsive, works on mobile, dark design
Category
Backgrounds
License
Free for personal and commercial use

Questions about this template

Can I use the Animated Blob Background code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Animated Blob Background – Pure CSS backgrounds component screenshot
Animated Blob Background · Pure CSS Backgrounds

More Backgrounds

CSS Pattern Backgrounds – Pure CSS backgrounds preview

CSS Pattern Backgrounds

Eight pure CSS gradient background patterns (dots, polka, grid, graph paper, stripes, crosshatch, checkerboard, zigzag) with a live scale slider.

Pure CSS Backgrounds
Animated Gradient Background – Pure CSS backgrounds preview

Animated Gradient Background

Pure CSS hero section with a slowly shifting multi-color gradient, drifting blurred blobs and a grain overlay, customizable through CSS variables.

Pure CSS Backgrounds