10 Footer Snippets for Every Job a Footer Actually Has

Most footers get built the same tired way: copy the header nav, stack it under a "© 2026" line, ship it. That's fine for a footer whose only job is to end the page politely. It falls apart the moment the footer has to do something specific — reassure a technical buyer the service is up, push a mobile app install, close a long scroll with real energy, or just get out of the way entirely on a site that doesn't need a link directory. A footer is the last thing a visitor sees before they convert or leave, and treating it as an afterthought wastes that position.

Below are ten free, self-contained footer snippets, each built around a different job: a full link-directory mega footer with a working newsletter form, a deliberately bare one-row footer, a frosted glass panel that needs something colourful behind it, a drifting aurora gradient behind a closing CTA, an app-shell status bar with a real ⌘K command palette, a SaaS status strip with a toggleable incident state, a back-to-top button whose ring tracks real scroll position, a scroll-triggered sticky CTA bar, a seamless auto-scrolling marquee, and an App Store / Google Play download footer with a CSS-only QR code. Every one is a live, interactive preview — try them right here in the article — and each exports to React, Vue, Angular or Tailwind in one click from its snippet page. All ten are plain HTML, CSS and (where needed) vanilla JavaScript, with no dependencies and no CDN scripts.

What these ten get right

• Every footer answers a specific question, not a generic one. "Is this service up right now?" gets a status strip. "How do I get the app?" gets store badges and a QR code. "How far down this page am I?" gets a ring that reads real scroll position. A footer that tries to answer every question at once answers none of them well.
• State lives in one place and CSS does the rest. A single data-theme attribute, a single .stf-down class, one duplicated marquee track — one boolean or one structural trick drives every coordinated visual change through descendant selectors, instead of JavaScript setting five style properties by hand.
• CSS interpolates, JavaScript just sets the target. The scroll-progress ring and the sticky CTA bar don't run a requestAnimationFrame loop for their motion. JS computes a number on scroll and writes it once; a CSS transition handles every frame of the actual movement.
• Motion respects the OS setting, every time. The aurora blobs, the pulsing status dot, and the marquee scroll each ship (or are called out where they don't) with a prefers-reduced-motion: reduce query that keeps the state legible without the animation.
• Placeholders are labelled, not disguised. The CSS-grid "QR code" and the SVG-badge App Store buttons look convincing, but the docs are explicit that they're layout demonstrations, not brand-compliant artwork or a scannable code — so nobody ships them by accident.

1. Mega Footer

The full link-directory footer: a brand column with social icons and a newsletter form, four navigational link groups, a "Hiring" badge tucked into one link, and a bottom bar with a language selector.

How it works: two nested CSS grids do the layout. The outer grid is 340px 1fr — a fixed brand column beside a fluid link area — and the inner link area is repeat(4, 1fr) for the four equal-width groups. Both collapse independently at the same 900px breakpoint: the outer grid stacks to one column, the inner grid drops to two, and a second breakpoint at 520px keeps it at two columns rather than forcing single-file. The newsletter's subscribe() validates the email against a basic regex, shows a red inline error for anything invalid, and on success shows a green confirmation while disabling the input and button so the same address can't be submitted twice — the whole interaction is one function with no framework.

Best for: SaaS products, developer tools, and any site with real depth — documentation, a blog, legal pages, multiple product lines — where a link directory is doing genuine navigational work. Tip: replace the hardcoded anchor lists with a data array of { heading, links[] } objects and map over them. It turns the footer into something a CMS or a single config file can drive, instead of raw markup someone edits by hand every time a link changes.

Grab the code: Mega Footer

2. Minimal Footer

The deliberate opposite of the mega footer: one flex row, three groups — brand, four links, two social icons and a copyright — and nothing else.

How it works: the entire layout is one line — display: flex; justify-content: space-between — holding exactly three children, with the nav links floating naturally in the middle between the brand and the icon cluster. No grid template, no manual margins, no breakpoint math for three groups that just need to spread apart. The link list is a real <nav aria-label="Footer"> rather than a bag of anchors in a div, which matters more here than in a page's primary navigation: it's the landmark that lets a screen reader jump straight to "the other nav" instead of reading through the entire page first. The one responsive rule that exists — stack to a column below 640px, keep the icon cluster spread with its own justify-content: space-between — is the entire mobile treatment.

Best for: marketing pages, small SaaS products, and personal sites where the header already carries the real navigation and the footer's only remaining job is closure. Tip: if you're reaching for a fourth link group or a newsletter box, that's the signal you've outgrown this footer — reach for the mega footer instead rather than bolting extra sections onto a component built to stay this small.

Grab the code: Minimal Footer

3. Glass Footer

A frosted-glass panel floating over a colourful, multi-blob gradient backdrop — the full glassmorphism recipe, with a graceful fallback for browsers that don't support it.

How it works: glassmorphism is three CSS declarations living together on one element — a translucent background, backdrop-filter: blur(18px), and a faint light-catching border — and removing any one collapses the illusion in a different way: background alone looks like a plain transparent box, blur without the border looks like it's floating with no defined edge. The part that's easy to skip when copy-pasting just the panel CSS is the backdrop itself: three overlapping radial-gradient blobs in different colours behind everything, because backdrop-filter has nothing worth blurring behind a flat single-colour page. An @supports not (backdrop-filter: blur(1px)) query swaps the panel to a solid, opaque background for the small minority of browsers that can't render the filter, so unsupported browsers get a legible fallback instead of a barely-visible low-contrast box.

Best for: product pages that already commit to a vibrant gradient or photo backdrop, AI and crypto marketing sites, and anywhere else glassmorphism is already the visual language. Tip: keep the panel capped at a max-width and centred rather than full-bleed. A glass bar touching both edges of the viewport loses the backdrop contrast at its border that makes the "floating object" read convincing in the first place.

Grab the code: Glass Footer

4. Aurora Gradient Footer

Three large, blurred colour blobs drift independently behind a centred closing CTA, borrowing the ambient-glow trick from modern SaaS hero sections and putting it at the bottom of the page instead.

How it works: three radial-gradient circles each run their own @keyframes animation on a different duration — 16s, 20s, 18s — and a different translate/scale path. Giving each blob independent, slightly-out-of-sync timing is the entire trick: three blobs pulsing in perfect sync would read as one mechanical thing, while three drifting at different speeds reads as organic weather. Rather than blurring each blob individually, a single filter: blur(60px) sits on the parent wrapper and applies to all three at once — cheaper to composite and the only knob you need to tune the whole effect's softness. Everything the user actually reads sits in its own z-index: 1 stacking layer above the aurora, so the ambient motion never has to fight the text for legibility; it's structurally behind the content, not blended with it.

Best for: SaaS and AI product marketing sites that already open with an aurora hero, so the footer's final CTA feels like part of the same designed experience rather than a generic close-out. Tip: gate the drift behind prefers-reduced-motion: reduce before shipping — this snippet ships without that query on purpose, as a reminder that "no JavaScript" doesn't mean "no motion consideration."

Grab the code: Aurora Gradient Footer

5. Command Bar Footer

A slim, IDE-style status bar with a live connection indicator, a real ⌘K command palette, a light/dark toggle, and a "synced Xs ago" timestamp that keeps recalculating.

How it works: this is a status bar for a logged-in app shell, not a marketing footer — modelled on the bar you'd find in an IDE or a project dashboard. The ⌘K badge is a genuine shortcut: a document-level keydown listener checks (isMac ? e.metaKey : e.ctrlKey) && e.key.toLowerCase() === 'k', calls preventDefault() to stop the browser's own shortcut from intercepting it, and opens the same palette a click does. navigator.platform (with a user-agent fallback) decides both the badge's label and which modifier the listener actually checks, so the shortcut works correctly rather than silently doing nothing on Windows and Linux. The theme toggle flips one data-theme attribute on the app's root wrapper, and every themed rule in the stylesheet is scoped under that attribute — one change re-themes the whole shell, not just the bar. A setInterval recomputes the "synced" label every second against the moment the page loaded, because a timestamp rendered once and left alone goes stale the instant more time passes.

Best for: SaaS dashboards, developer tools, and any web app where a persistent status strip needs to reassure the user the app is connected while offering instant, keyboard-first navigation. Tip: the four palette commands are placeholders — wire each button's click handler to a real action (navigation, search, opening a modal) and consider adding arrow-key navigation through the list so the whole palette is usable without a mouse.

Grab the code: Command Bar Footer

6. Status Bar Footer

A pulsing "All systems operational" strip sits above a conventional footer, with a demo toggle that flips the whole thing to a red incident state.

How it works: developer-tool and infrastructure sites almost universally put a status indicator somewhere a prospective customer can see it before they trust the service with production traffic, and this builds that strip as the footer's top band. A static green dot reads as decoration; a @keyframes animation gently cycling its opacity between 1 and 0.45 reads as "this is a live signal," the same visual grammar as a recording indicator. Clicking "Simulate incident" toggles a single .stf-down class on the strip's container, and CSS handles everything from there — background tint, border colour, dot colour and text colour all key off that one class via descendant selectors, while the JavaScript only swaps two strings. One boolean, five coordinated visual changes, zero manually-set inline styles.

Best for: developer tools, API and platform providers, and any product selling uptime as part of its pitch — where the absence of a visible status signal can itself read as a red flag to an experienced buyer. Tip: replace the click-toggled demo state with a fetch to your real status provider on page load, and decide what a failed status check itself should show — a third "unknown" state is usually the right answer, not silently defaulting to "operational."

Grab the code: Status Bar Footer

7. Scroll Progress Footer

A fixed back-to-top button whose ring fills to the exact percentage of the page you've scrolled — not a fixed-duration animation, a live read of scroll position.

How it works: the button is two concentric SVG circles sharing a centre and radius — a faint static track and an animated arc using stroke-dasharray set to the circle's exact circumference (2πr, computed once as CIRC) with stroke-dashoffset driven toward zero as the arc draws in, the whole SVG rotated -90deg so it fills from 12 o'clock. On every scroll event — registered { passive: true } so the browser never waits to see if the handler blocks it — the fraction scrolled becomes strokeDashoffset = CIRC * (1 - pct): full circumference (empty ring) at the top, zero (complete ring) at the bottom. There's deliberately no requestAnimationFrame loop here; a short 0.1s linear CSS transition smooths the per-event jitter, because the ring only needs to update when a scroll event actually fires.

Best for: documentation, long-form articles, and changelogs — anywhere "how much content is left" is a real, recurring question, doubling as a functional back-to-top control once the reader is done. Tip: if you resize the ring, update the CIRC constant to 2 * Math.PI * r with the new radius. The stroke math depends on that value matching the SVG circle's actual r exactly, or the ring only appears to fill partway.

Grab the code: Scroll Progress Footer

8. Sticky CTA Footer

A floating call-to-action bar slides up from the bottom once you scroll past the hero, and tucks away again the moment you return to the top.

How it works: the bar starts translated below the viewport at opacity: 0, and a scroll handler toggles an is-shown class once window.scrollY passes a threshold — about 320px, roughly past the hero — removing it again above that point so the bar never covers content at the very top. The handler itself never does layout work directly: it sets a ticking flag and schedules the actual class toggle inside a requestAnimationFrame callback, guaranteeing at most one update per frame no matter how many native scroll events fire in between. The show and hide are a single CSS transition on transform and opacity with an ease-out cubic-bezier, which keeps the motion on the compositor and jank-free. A "Maybe later" button sets a dismissed flag that the update function checks and early-returns on, so the bar stays gone for the rest of the session once closed.

Best for: trial prompts and conversion bars that need to stay in reach without a blocking popup — pair it with an announcement bar at the top or an exit-intent popup for the two remaining moments a visitor might convert. Tip: persist the dismissed flag to localStorage so it stays hidden across visits rather than resetting every session — the current in-memory flag is a demo choice, not a production one.

Grab the code: Sticky CTA Footer

9. Marquee Footer

A huge, continuously scrolling band of words sits above a conventional link row — pure CSS animation, no JavaScript, and it pauses the instant your cursor lands on it.

How it works: the trick is deceptively simple. The track contains the same sequence of words twice in a row, laid out with display: flex; width: max-content so the track is exactly twice as wide as one copy of the content — max-content isn't optional here, since without it the flex track would shrink to its parent's width and break the "-50% equals exactly one copy" math the whole animation depends on. A @keyframes animation moves the track from translateX(0) to translateX(-50%) — precisely one copy's width — over 22 seconds, linear, and because the second copy is identical to the first, the reset from -50% back to 0% is invisible: no seam, no jump, an apparently infinite loop built from a track that's secretly only two repeats long. A mask: linear-gradient(...) fades both edges to transparent so words appear to dissolve into the page rather than getting clipped mid-character, and animation-play-state: paused on hover freezes the scroll so the real, clickable link row underneath never has to compete with motion for attention.

Best for: agency and portfolio closings, product launch pages repeating a campaign phrase, and any site already leaning into bold, kinetic typography elsewhere in the design. Tip: if you change the scroll speed, only the @keyframes duration needs to move — the -50% distance stays fixed regardless, since it's tied to the doubled content's width, not the timing.

Grab the code: Marquee Footer

10. App Download Footer

A footer built entirely around getting a visitor into your mobile app: real App Store and Google Play badges, a scannable-looking QR code built from pure CSS, and a slim legal row underneath.

How it works: both store badges are inline SVG glyphs plus text inside real <a> tags, not screenshots of Apple's or Google's official artwork — which means the text stays selectable and screen-reader friendly, the badge recolours and resizes with plain CSS, and there's no image request blocking the footer's first paint. The "QR code" is a fixed 8×8 display: grid with fifteen cells positioned by explicit grid-area coordinates to resemble a scan pattern — it's not a real, decodable code, and the docs say so directly: it demonstrates the zero-dependency way to get QR-code styling into a footer instantly, with the expectation you'll swap in a genuinely generated image once you have a real store link to encode. The footer splits cleanly into a persuasive top section and a slim, reusable bottom bar, so the pitch never has to share visual weight with boilerplate legal links.

Best for: mobile-first product marketing sites, SaaS products with a companion app, and content sites (news, fitness, finance) that want the same download push to close every article. Tip: before shipping, replace both placeholders — swap the CSS grid for a real QR image encoding your store link, and swap the demo badges for Apple's and Google's official, brand-compliant badge assets. This snippet's job is proving out the layout, not the final artwork.

Grab the code: App Download Footer

How to drop these into your project

1. Open any snippet and hit View / Edit Code to see the HTML, CSS and JS in separate tabs, then paste the HTML into your markup, the CSS into your stylesheet, and the JS before your closing </body> tag — or use the one-click export to React, Vue, Angular or Tailwind right from the snippet page. All ten are dependency-free, so there's nothing else to install.
2. Pick the footer for the question your page is actually asking. A mega footer for a site with real navigational depth, a minimal footer when the header already carries that job, a status strip when uptime is part of the pitch, a download footer when the app is the point. Stacking several of these jobs into one footer is how you end up back at a generic mega-footer nobody reads.
3. Keep the one-attribute-drives-everything pattern intact. The theme toggle's data-theme and the status strip's .stf-down class are the reusable parts. Restyle the colours and copy freely; don't split that single source of truth into several manually-synced style updates.
4. Respect prefers-reduced-motion, including where a snippet doesn't yet. Most of these ship the query already; the aurora gradient footer is a deliberate exception, included as a reminder to add it yourself before shipping motion-heavy CSS to production.
5. Ship real assets before you ship to production. The QR code and store badges in the app download footer, and the four placeholder commands in the command bar footer's palette, are explicitly stand-ins. Swap them for the real thing before launch, not after someone notices.
6. In React, mind the listeners. The command bar's keydown handler, the scroll-progress ring's scroll listener, and the sticky CTA's scroll handler all need to attach in a mount effect and clean up on unmount, or they'll fire against state that no longer exists.

Final thought

A footer that just closes the page is fine right up until the page needs the footer to do something — reassure, convert, orient, or simply step aside. These ten are built around ten different answers to "what is this footer actually for," and every one of them is small enough to read end to end in a few minutes: a single grid, one boolean class, one duplicated track. None of them need a library to earn their place at the bottom of the page.

Try them, retune the timings, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — it's free and runs entirely in your browser.