Playground · 15 demos
CSS Footer Designs Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Footer Designs collection for the gallery view with code panels.
01 Pure CSS
Aurora Drift
Modern SaaS footer with a slowly drifting aurora-band gradient behind a 4-column link grid. Brand block on the left, newsletter capture on the right, gradient meta line at the bottom. Pure CSS, no JS.
Open
02 Pure CSS
Newspaper Masthead
Editorial publishing-house footer styled as a newspaper masthead. Serif drop-cap brand glyph on cream stock, gilt double rules, three-column section list. Pure CSS, no JS.
Open
03 CSS + JS
Newsletter Hero
Personal blog / creator footer dominated by a centered newsletter capture. Oversized email field, animated checkmark on submit, minimal nav strip below. JS handles the success-state checkmark animation.
Open
04 Pure CSS
Postcard
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.
Open
05 Pure CSS
Brutalist Mono
Agency / portfolio footer in brutalist mono — heavy 4px black borders, hard yellow background, hard offset shadows, all-caps labels. Aggressive, confident, and unmistakable. Pure CSS.
Open
06 Pure CSS
Vinyl Record
Music / podcast brand footer with a slowly spinning vinyl record on the left and a static tonearm resting on it. Three column link sections to the right. CSS animation drives the spin; respects prefers-reduced-motion.
Open
07 Pure CSS
Neon Sign
Nightlife / gaming brand footer with an animated neon-tube wordmark that flickers irregularly, hot-pink glow halo, dark-room backdrop. Three column link sections in muted neon. Pure CSS keyframes drive the flicker.
Open
08 Pure CSS
Editorial Centered
Minimalist single-column footer anchored by an oversized centered wordmark. A single hairline rule sits above the brand; below it, five links separated by mid-dot dividers; below that, a small italic copyright. Personal-brand and boutique-studio aesthetic. Pure CSS, no JS.
Open
09 Pure CSS
Mega Footer
Wide 5-column mega footer for content-heavy sites — Stripe / Shopify scale. Brand block, four link columns, newsletter, social rail, region/language picker, compliance badges, full meta line. Pure CSS, no JS.
Open
10 Pure CSS
Contact Card
Local-business / professional-services footer with prominent contact card. Address, phone, email, business hours, and a stylized SVG map block. Two-column layout with a quick-links column on the right. Pure CSS.
Open
11 Pure CSS
Trust Badge Footer
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. Pure CSS, no JS.
Open
12 Pure CSS
FAQ Drawer
Footer that doubles as a quick-help panel. Top section holds 4 collapsible FAQ entries via native <details>/<summary>; bottom row has a standard link grid. Pure CSS via the disclosure widget.
Open
13 Pure CSS
CTA Stripe
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.
Open
14 Pure CSS
Globe Switcher
Global-SaaS footer featuring language, currency, and region pickers above a standard 4-column link grid. Region pills for quick selection. Pure CSS via native <select> for accessibility.
Open
15 CSS + JS
Hover Wave
Interactive footer where every link grows a smooth wave underline on hover, plus a floating back-to-top button anchored to the corner. JS handles only the back-to-top scroll behavior; the underline is pure CSS.
Open