webdevpuneet.com

Related Snippets

30 in Footers category
25–30 of 30

Social Magnet Footer

Aurora Gradient Footer

App Download Footer

Minimal Footer

Sticky CTA Footer

Mega Footer

Aurora Gradient Footer — Free HTML CSS Animated Background Footer

Aurora Gradient Footer · Footers · Plain HTML & CSS · Live preview

CategoryFooters
TagsCSS AnimationCSS OnlyLanding PageCSS Grid

Copy & paste

Source Code

<footer class="agf">
  <div class="agf-aurora" aria-hidden="true">
    <span class="agf-blob b1"></span>
    <span class="agf-blob b2"></span>
    <span class="agf-blob b3"></span>
  </div>
  <div class="agf-inner">
    <div class="agf-cta">
      <h2>Ready when you are.</h2>
      <p>Start free — no credit card, cancel anytime.</p>
      <a href="#" class="agf-btn">Start building <span>→</span></a>
    </div>
    <div class="agf-cols">
      <div class="agf-col">
        <h4>Product</h4>
        <a href="#">Features</a><a href="#">Integrations</a><a href="#">Changelog</a>
      </div>
      <div class="agf-col">
        <h4>Company</h4>
        <a href="#">About</a><a href="#">Careers</a><a href="#">Blog</a>
      </div>
      <div class="agf-col">
        <h4>Resources</h4>
        <a href="#">Docs</a><a href="#">Community</a><a href="#">Support</a>
      </div>
    </div>
    <div class="agf-bottom">
      <span class="agf-brand">◆ Fluxly</span>
      <span>© 2026 Fluxly, Inc. — All rights reserved.</span>
    </div>
  </div>
</footer>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Three independently timed, drifting radial-gradient blobs for an organic ambient glow
One shared blur() filter on the parent layer instead of filtering each blob separately
Content sits in its own z-index layer above the effect for guaranteed legibility
Centred CTA section above a conventional three-column link grid and bottom bar
Pure CSS animation — no canvas, no JavaScript, no external library
Responsive: link columns collapse to two per row below 640px

About this UI Snippet

Aurora Gradient Footer — A Living Background Behind a Static CTA

Screenshot of the Aurora Gradient Footer snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML and CSSThe aurora blobs start drifting immediately on load — no JavaScript is used.
  2. 2
    Adjust the blob coloursEach .agf-blob's radial-gradient starts with a hex colour — change b1/b2/b3 to match your brand palette.
  3. 3
    Tune the drift speed and blurEdit the animation-duration on each keyframe for faster or slower movement, and blur(60px) on .agf-aurora for a sharper or softer glow.
  4. 4
    Update the CTA and link columnsReplace the headline, subtext, button text, and the three link columns with your own content.
  5. 5
    Check performance on a low-end deviceThe blur is GPU-composited but still worth testing — if it stutters on older hardware, reduce blob size or blur radius rather than removing the animation entirely.
  6. 6
    Export in your formatClick HTML, JSX, or Tailwind to download the version you need.

Real-world uses

Common Use Cases

SaaS and AI product marketing sites
A footer that visually echoes an aurora hero section elsewhere on the page, so the final CTA feels like part of the same designed experience rather than a generic close-out.
Product launch and landing pages
Give the last conversion opportunity on the page the same visual weight and motion as the hero, instead of letting energy drop off toward the bottom of the scroll.
Portfolio and agency closing sections
An ambient, premium-feeling background for a "let's talk" closing CTA without needing a video or WebGL background.
Dark-themed developer tool sites
Fits naturally alongside a dark, gradient-forward design system — pair it with a matching aurora or spotlight hero for visual consistency top to bottom.
Studying layered CSS animation
A clean reference for staggering multiple independent keyframe animations and separating an ambient effect from foreground content with z-index.
A/B testing footer engagement
Compare click-through on the closing CTA against a static-background footer to see whether ambient motion measurably affects conversion at the bottom of the page.
Related: Minimal Footer
See the Minimal Footer for a related footers pattern worth pairing with this one.
Related: Sitemap Directory Footer
See the Sitemap Directory Footer for a related footers pattern worth pairing with this one.
Related: Business Hours Status Footer
See the Business Hours Status Footer for a related footers pattern worth pairing with this one.
Related: Careers Teaser Footer
See the Careers Teaser Footer for a related footers pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

It should be lightweight on any reasonably modern device — the blobs animate transform and the blur is applied once to a parent wrapper rather than per element, so the browser compositor handles most of the work off the main thread. If you notice stutter on low-end hardware, reduce blob size or blur radius before removing the animation, and consider gating it behind prefers-reduced-motion.

Filtering three separate elements individually is more expensive than filtering one shared parent layer once. It also means a single blur(60px) value controls the softness of the entire effect, rather than needing to keep three blur values in sync.

It already cannot — the aurora layer is position: absolute with no z-index, and all real content lives inside .agf-inner at position: relative; z-index: 1, placing it in a higher paint layer. The effect is structurally behind the content, not blended with it.

Yes. Each blob is an independent span with its own keyframe animation, so you can add a fourth with a new drift path and duration, or remove one — just keep each blob's timing distinct from the others so the motion continues to read as organic rather than synchronized.

Not out of the box — add a @media (prefers-reduced-motion: reduce) block that sets animation: none on each .agf-blob to freeze the blobs in place for users who have that OS setting enabled, while keeping the static gradient colours visible.

Click JSX, Vue, or Angular to download the converted component. The animation is pure CSS keyframes, so no lifecycle code is needed — the conversion is a direct markup and class-name translation.