Aurora Gradient Footer — Free HTML CSS Animated Background Footer

A footer's final CTA competes for attention with everything the user just scrolled past. This snippet borrows the ambient-glow trick from modern SaaS hero sections — three large, blurred, slowly drifting colour blobs — and puts it behind the footer's closing pitch instead, so the last thing on the page feels alive rather than like an afterthought bolted on once the content ran out.

Three blobs, three independent drift paths

.agf-aurora is an absolutely positioned layer holding three radial-gradient circles, each roughly 350–420px, positioned to overlap loosely across the top and bottom of the footer. Each blob runs its own @keyframes — drift1, drift2, drift3 — translating and scaling on a different duration (16s, 20s, 18s) and a different path. Giving each blob its own timing is what stops the animation from reading as one thing pulsing; three independent, slightly-out-of-sync motions is what makes it feel organic rather than mechanical, the same principle behind aurora background hero effects.

One `blur()` on the parent, not three

Rather than blurring each blob individually, filter: blur(60px) sits on the .agf-aurora wrapper and applies to all three children at once. This is both simpler to tune — one blur radius controls the whole effect's softness — and cheaper: the browser composites the blurred layer once rather than filtering three separate elements every frame. opacity: .55 on the same wrapper keeps the effect ambient rather than distracting from the text sitting above it.

Content sits in its own stacking layer

Everything the user actually reads — the CTA, the link columns, the bottom bar — lives inside .agf-inner at position: relative; z-index: 1, one paint layer above the aurora. This is the same content-above-effect separation used in the glare card: the ambient motion never has to fight for legibility because it is structurally behind the text, not blended with it.

A CTA that earns the space, then a real footer beneath it

The upper half is a single centred call to action — the loudest, simplest moment on the page. Below it, a conventional three-column link grid and a slim bottom bar handle the actual navigational duty, separated by a hairline border. Splitting the footer this way means the aurora effect only has to carry the emotional close of the page; it doesn't have to compete with a dense link directory sitting in the same visual field.