15 CSS Footer Designs
A CSS footer is the bottom band of a page that holds navigation, brand info, and meta links. These 15 hand-coded designs are ready-to-ship footers for SaaS landings, editorial sites, e-commerce, dev tools, and marketing pages — copy the markup, swap in your links and brand, and ship.
01 / 15
Aurora Drift
Pure CSS 
Modern SaaS footer with a slowly drifting aurora-band gradient behind a 4-column link grid.
02 / 15
Newspaper Masthead
Pure CSS 
Editorial publishing-house footer styled as a newspaper masthead.
03 / 15
Newsletter Hero
CSS + JS 
Personal blog / creator footer dominated by a centered newsletter capture.
04 / 15
Postcard
Pure CSS 
Travel / lifestyle footer with a Polaroid-style brand card rotated 1.5° on the left, dotted-border "wish you were here" feel, and three column link blocks beside it. Pure CSS, no JS.
05 / 15
Brutalist Mono
Pure CSS 
Agency / portfolio footer in brutalist mono — heavy 4px black borders, hard yellow background, hard offset shadows, all-caps labels.
06 / 15
Vinyl Record
Pure CSS 
Music / podcast brand footer with a slowly spinning vinyl record on the left and a static tonearm resting on it.
07 / 15
Neon Sign
Pure CSS 
Nightlife / gaming brand footer with an animated neon-tube wordmark that flickers irregularly, hot-pink glow halo, dark-room backdrop.
08 / 15
Editorial Centered
Pure CSS 
Minimalist single-column footer anchored by an oversized centered wordmark.
09 / 15
Mega Footer
Pure CSS 
Wide 5-column mega footer for content-heavy sites — Stripe / Shopify scale.
10 / 15
Contact Card
Pure CSS 
Local-business / professional-services footer with prominent contact card.
11 / 15
Trust Badge Footer
Pure CSS 
B2B credibility footer with a featured customer testimonial above the link grid, a horizontal customer-logo strip below, and SOC 2 / GDPR / ISO compliance badges.
13 / 15
CTA Stripe
Pure CSS 
Conversion-driven footer with a bold full-bleed CTA stripe ("Ready to ship?") above a compact link footer. Coral CTA stripe contrasts with the dark base. Pure CSS, no JS.
14 / 15
Globe Switcher
Pure CSS 
Global-SaaS footer featuring language, currency, and region pickers above a standard 4-column link grid.
FAQ
Frequently asked questions
What are the most common CSS footer patterns?
The most common patterns are: a multi-column link footer with brand block + 3-4 link sections + meta line (used by most SaaS and content sites), a newsletter-hero footer that dominates with an email capture, an editorial masthead for publishing, and a brutalist or themed footer for agencies and creative brands. This collection covers all of these plus less-common-but-attention-grabbing variants like terminal-window, vinyl record, neon sign, subway map, and origami fold.
Are these footers responsive?
Yes — every footer collapses gracefully from desktop to tablet to mobile via media queries built into each demo's CSS. Multi-column grids fold to 2 columns under 880px and 1 column under 480px. The brand block typically spans the full width on small screens. Tested at viewport widths from 320px up.
Are these footers accessible?
Yes. Every footer uses semantic <code><footer></code> as the outermost element. Navigation regions use <code><nav></code> with appropriate aria-label where applicable. Icon-only social links carry aria-label. Form inputs in newsletter captures have proper labels and autocomplete hints. All animations respect prefers-reduced-motion.
Do these footers work without JavaScript?
13 of the 15 are Pure CSS — they ship HTML + CSS only. The remaining 2 (Newsletter Hero and Hover Wave) carry small focused JS for their interactive details (success-state checkmark animation and back-to-top scroll behavior). Each demo's JS is self-contained and lives in the JS tab.
Can I swap the colors and content?
Yes. Every demo uses solid hex values in plain CSS — no design tokens, no preprocessor variables. Pick the demo you like, copy the HTML + CSS + JS into your project, and find/replace the accent colors with your brand. Link content lives directly in the HTML, so swapping it is straightforward markup editing.
Related collections
24 CSS Grid Layouts
24
24 hand-coded CSS grid layouts — holy grail, 12-column, bento, masonry, subgrid, dashboard, kanban, container queries and more. Pure CSS, copy-paste ready.
css grid grid layout css layout
Responsive
30 CSS Hero Sections
30
30 hand-coded CSS hero sections — gradient mesh, glassmorphism, bento, terminal, parallax, 3D card stack, conic orbit and more. No images, copy-paste ready.
hero section landing page saas hero
Responsive
21 CSS Pricing Sections
21
21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.
pricing section saas pricing pricing table
Responsive