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. Brand block on the left, newsletter capture on the right, gradient meta line at the bottom. Pure CSS, no JS.
.cf01 {
position: relative;
width: 100%;
padding: 56px 32px 0;
background: #0a0a14;
color: #d4d2e8;
font-family: ui-sans-serif, system-ui, sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.cf01::before {
content: "";
position: absolute;
top: -100px;
left: -10%;
width: 120%;
height: 220px;
background:
radial-gradient(60% 100% at 30% 50%, #7c6cff 0%, transparent 70%),
radial-gradient(50% 100% at 75% 50%, #ec4899 0%, transparent 70%);
filter: blur(60px);
opacity: 0.55;
animation: cf01-drift 18s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes cf01-drift {
0% {
transform: translateX(-5%);
}
100% {
transform: translateX(5%);
}
}
.cf01b {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf01brand {
min-width: 0;
}
.cf01logo {
display: flex;
align-items: center;
gap: 8px;
font:
800 22px/1 ui-sans-serif,
system-ui;
color: #fff;
margin-bottom: 14px;
}
.cf01logo span {
color: #a78bfa;
font-size: 22px;
}
.cf01tag {
margin: 0 0 18px;
font-size: 13px;
color: #9d9bbf;
line-height: 1.5;
max-width: 240px;
}
.cf01social {
display: flex;
gap: 8px;
}
.cf01social a {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: #d4d2e8;
text-decoration: none;
font-size: 14px;
transition:
background 0.2s,
border-color 0.2s;
}
.cf01social a:hover {
background: rgba(167, 139, 250, 0.18);
border-color: #a78bfa;
color: #fff;
}
.cf01col {
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cf01col h4 {
margin: 0 0 6px;
font:
600 12px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.cf01col a {
font-size: 13px;
color: #9d9bbf;
text-decoration: none;
transition: color 0.2s;
}
.cf01col a:hover {
color: #fff;
}
.cf01news {
min-width: 0;
}
.cf01news h4 {
margin: 0 0 6px;
font:
600 12px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.cf01news p {
margin: 0 0 12px;
font-size: 12px;
color: #9d9bbf;
}
.cf01form {
display: flex;
gap: 6px;
}
.cf01form input {
flex: 1;
min-width: 0;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #fff;
font:
13px ui-sans-serif,
system-ui;
outline: none;
transition:
border-color 0.2s,
background 0.2s;
}
.cf01form input:focus {
border-color: #a78bfa;
background: rgba(255, 255, 255, 0.08);
}
.cf01form button {
padding: 9px 14px;
background: linear-gradient(135deg, #7c6cff 0%, #ec4899 100%);
border: 0;
border-radius: 6px;
color: #fff;
font:
600 12px ui-sans-serif,
system-ui;
cursor: pointer;
transition: transform 0.15s;
}
.cf01form button:hover {
transform: translateY(-1px);
}
.cf01meta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 18px 0 22px;
font-size: 12px;
color: #6a6890;
flex-wrap: wrap;
}
.cf01legal {
display: flex;
gap: 18px;
}
.cf01legal a {
color: #9d9bbf;
text-decoration: none;
transition: color 0.2s;
}
.cf01legal a:hover {
color: #fff;
}
@media (max-width: 880px) {
.cf01b {
grid-template-columns: 1fr 1fr;
}
.cf01brand,
.cf01news {
grid-column: span 2;
}
}
@media (max-width: 480px) {
.cf01b {
grid-template-columns: 1fr;
}
.cf01brand,
.cf01news {
grid-column: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.cf01::before {
animation: none;
}
} <footer class="cf01">
<div class="cf01b">
<div class="cf01brand">
<div class="cf01logo"><span>◆</span> Lumen</div>
<p class="cf01tag">Build at the speed of thought.</p>
<div class="cf01social">
<a href="#" aria-label="Twitter">𝕏</a>
<a href="#" aria-label="GitHub">◐</a>
<a href="#" aria-label="LinkedIn">in</a>
<a href="#" aria-label="YouTube">▶</a>
</div>
</div>
<div class="cf01col">
<h4>Product</h4>
<a href="#">Features</a>
<a href="#">Integrations</a>
<a href="#">Pricing</a>
<a href="#">Changelog</a>
<a href="#">Roadmap</a>
</div>
<div class="cf01col">
<h4>Resources</h4>
<a href="#">Documentation</a>
<a href="#">API reference</a>
<a href="#">Tutorials</a>
<a href="#">Community</a>
<a href="#">Status</a>
</div>
<div class="cf01col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Customers</a>
<a href="#">Blog</a>
<a href="#">Careers</a>
<a href="#">Press kit</a>
</div>
<div class="cf01news">
<h4>Stay updated</h4>
<p>Monthly product news. No spam.</p>
<form class="cf01form">
<input type="email" placeholder="[email protected]" aria-label="Email" />
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="cf01meta">
<span>© 2026 Lumen Inc.</span>
<div class="cf01legal">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
<a href="#">Security</a>
</div>
</div>
</footer> 02 / 15
Newspaper Masthead
Pure CSS 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.
.cf02 {
width: 100%;
padding: 0 32px;
background: #f5ead0;
color: #1a1a1a;
font-family: ui-serif, "Times New Roman", Georgia, serif;
box-sizing: border-box;
}
.cf02rule {
height: 5px;
border-top: 1.5px solid #b8860b;
border-bottom: 1.5px solid #b8860b;
margin: 0;
}
.cf02b {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 36px;
max-width: 1200px;
margin: 0 auto;
padding: 36px 0 32px;
}
.cf02brand {
display: flex;
align-items: flex-start;
gap: 14px;
min-width: 0;
}
.cf02drop {
font-size: 64px;
line-height: 0.85;
font-weight: 700;
color: #c43a32;
padding: 4px 6px 2px;
border: 2px solid #1a1a1a;
flex-shrink: 0;
}
.cf02bn {
min-width: 0;
}
.cf02name {
font:
700 26px/1.05 ui-serif,
"Times New Roman",
Georgia,
serif;
letter-spacing: -0.01em;
}
.cf02tag {
margin-top: 6px;
font:
italic 12px/1.5 ui-serif,
Georgia,
serif;
color: #5c5240;
}
.cf02col {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.cf02col h4 {
margin: 0 0 8px;
font:
700 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #b8860b;
padding-bottom: 6px;
border-bottom: 1px solid rgba(26, 26, 26, 0.18);
}
.cf02col a {
font:
14px/1.5 ui-serif,
Georgia,
serif;
color: #1a1a1a;
text-decoration: none;
transition: color 0.2s;
}
.cf02col a:hover {
color: #c43a32;
text-decoration: underline;
text-underline-offset: 3px;
}
.cf02foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1200px;
margin: 0 auto;
padding: 14px 0 18px;
font:
italic 12px/1.5 ui-serif,
Georgia,
serif;
color: #5c5240;
flex-wrap: wrap;
}
.cf02legal a {
color: #5c5240;
text-decoration: none;
transition: color 0.2s;
}
.cf02legal a:hover {
color: #c43a32;
}
@media (max-width: 880px) {
.cf02b {
grid-template-columns: 1fr 1fr;
}
.cf02brand {
grid-column: span 2;
}
}
@media (max-width: 480px) {
.cf02b {
grid-template-columns: 1fr;
}
.cf02brand {
grid-column: auto;
}
} <footer class="cf02">
<div class="cf02rule"></div>
<div class="cf02b">
<div class="cf02brand">
<div class="cf02drop">T</div>
<div class="cf02bn">
<div class="cf02name">The Standard</div>
<div class="cf02tag">Est. 1898 · Daily Edition · No. 9,742</div>
</div>
</div>
<div class="cf02col">
<h4>Sections</h4>
<a href="#">Front Page</a>
<a href="#">World</a>
<a href="#">Politics</a>
<a href="#">Business</a>
<a href="#">Opinion</a>
<a href="#">Culture</a>
</div>
<div class="cf02col">
<h4>Subscribe</h4>
<a href="#">Daily Digital</a>
<a href="#">Weekend Print</a>
<a href="#">Newsletter</a>
<a href="#">Gift a subscription</a>
<a href="#">Group rates</a>
</div>
<div class="cf02col">
<h4>Masthead</h4>
<a href="#">About us</a>
<a href="#">Editorial board</a>
<a href="#">Contact editor</a>
<a href="#">Submit a tip</a>
<a href="#">Letters policy</a>
</div>
</div>
<div class="cf02rule"></div>
<div class="cf02foot">
<span>© 2026 The Standard Publishing Co. — All rights reserved.</span>
<div class="cf02legal">
<a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Subscriber agreement</a>
</div>
</div>
</footer> 03 / 15
Newsletter Hero
CSS + JS 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.
.cf05 {
width: 100%;
padding: 64px 24px 28px;
background: #fdfaf3;
color: #2a2520;
font-family: ui-serif, Georgia, serif;
box-sizing: border-box;
text-align: center;
}
.cf05hero {
max-width: 640px;
margin: 0 auto 36px;
}
.cf05h {
margin: 0 0 10px;
font:
700 32px/1.2 ui-serif,
Georgia,
serif;
color: #2a2520;
letter-spacing: -0.02em;
}
.cf05p {
margin: 0 0 24px;
font:
16px/1.55 ui-serif,
Georgia,
serif;
color: #6b6056;
}
.cf05f {
display: flex;
gap: 8px;
max-width: 480px;
margin: 0 auto 16px;
}
.cf05f input {
flex: 1;
min-width: 0;
padding: 14px 18px;
background: #fff;
border: 2px solid #2a2520;
border-radius: 10px;
font:
15px ui-sans-serif,
system-ui;
color: #2a2520;
outline: none;
transition: border-color 0.2s;
}
.cf05f input:focus {
border-color: #c43a32;
}
.cf05f button {
position: relative;
padding: 14px 22px;
background: #2a2520;
border: 2px solid #2a2520;
border-radius: 10px;
color: #fdfaf3;
font:
600 14px ui-sans-serif,
system-ui;
cursor: pointer;
transition:
background 0.2s,
transform 0.15s;
min-width: 120px;
}
.cf05f button:hover {
background: #c43a32;
border-color: #c43a32;
}
.cf05f.cf05-ok button {
background: #2d8a3e;
border-color: #2d8a3e;
}
.cf05bt {
transition: opacity 0.2s;
}
.cf05ck {
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 22px;
transform: translate(-50%, -50%);
color: #fdfaf3;
opacity: 0;
stroke-dasharray: 30;
stroke-dashoffset: 30;
transition: opacity 0.2s;
}
.cf05f.cf05-ok .cf05bt {
opacity: 0;
}
.cf05f.cf05-ok .cf05ck {
opacity: 1;
animation: cf05-draw 0.45s 0.15s forwards ease-out;
}
@keyframes cf05-draw {
to {
stroke-dashoffset: 0;
}
}
.cf05count {
font:
italic 13px ui-serif,
Georgia,
serif;
color: #8a7d6f;
}
.cf05count strong {
color: #2a2520;
font-weight: 700;
}
.cf05n {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 24px;
padding: 22px 0;
border-top: 1px solid rgba(42, 37, 32, 0.15);
border-bottom: 1px solid rgba(42, 37, 32, 0.15);
margin: 0 auto;
max-width: 720px;
}
.cf05n a {
font:
14px/1 ui-serif,
Georgia,
serif;
color: #6b6056;
text-decoration: none;
transition: color 0.2s;
}
.cf05n a:hover {
color: #c43a32;
text-decoration: underline;
text-underline-offset: 4px;
}
.cf05meta {
margin-top: 18px;
font:
italic 12px ui-serif,
Georgia,
serif;
color: #8a7d6f;
}
@media (prefers-reduced-motion: reduce) {
.cf05ck {
transition: none;
animation: none;
stroke-dashoffset: 0;
}
} <footer class="cf05">
<div class="cf05hero">
<h2 class="cf05h">Get one short essay every Friday.</h2>
<p class="cf05p">No promotions. No "growth hacks." Unsubscribe with one click.</p>
<form class="cf05f" data-cf05>
<input type="email" placeholder="[email protected]" aria-label="Email" required />
<button type="submit">
<span class="cf05bt">Subscribe</span>
<svg class="cf05ck" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M5 12l5 5L20 7"
stroke="currentColor"
stroke-width="2.5"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</form>
<div class="cf05count">Joined by <strong>4,128</strong> readers</div>
</div>
<nav class="cf05n">
<a href="#">Essays</a>
<a href="#">About</a>
<a href="#">Bookshelf</a>
<a href="#">Now</a>
<a href="#">RSS</a>
<a href="#">Contact</a>
</nav>
<div class="cf05meta">© 2026 Mira Okafor — Personal corner of the internet.</div>
</footer> /* Newsletter Hero — submit shows checkmark draw + button color shift,
then reverts after 2.6s. Demo only — no actual network call. */
(function () {
var form = document.querySelector("[data-cf05]");
if (!form) return;
form.addEventListener("submit", function (e) {
e.preventDefault();
if (form.classList.contains("cf05-ok")) return;
form.classList.add("cf05-ok");
setTimeout(function () {
form.classList.remove("cf05-ok");
form.reset();
}, 2600);
});
})(); 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.
.cf06 {
width: 100%;
padding: 56px 32px 28px;
background: #ebe3d3;
color: #2a2520;
font-family: ui-sans-serif, system-ui, sans-serif;
box-sizing: border-box;
}
.cf06b {
display: grid;
grid-template-columns: 220px 1fr 1fr 1fr;
gap: 32px;
max-width: 1100px;
margin: 0 auto;
padding-bottom: 28px;
border-bottom: 1.5px dashed rgba(42, 37, 32, 0.25);
align-items: flex-start;
}
.cf06card {
background: #fff;
padding: 14px 14px 18px;
box-shadow:
0 8px 22px rgba(42, 37, 32, 0.18),
0 2px 6px rgba(42, 37, 32, 0.08);
transform: rotate(-1.5deg);
transition: transform 0.3s;
}
.cf06card:hover {
transform: rotate(0deg) translateY(-2px);
}
.cf06img {
aspect-ratio: 1;
background: #c8b89e;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
.cf06cap {
padding-top: 12px;
text-align: center;
}
.cf06cn {
font:
700 18px/1.1 "Bradley Hand",
"Marker Felt",
ui-serif,
cursive;
color: #2a2520;
}
.cf06ct {
font:
11px/1.4 ui-sans-serif,
system-ui;
color: #6b6056;
margin-top: 3px;
letter-spacing: 0.04em;
}
.cf06col {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cf06col h4 {
margin: 0 0 6px;
font:
700 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c43a32;
}
.cf06col a {
font-size: 14px;
color: #2a2520;
text-decoration: none;
transition: color 0.2s;
}
.cf06col a:hover {
color: #c43a32;
text-decoration: underline;
text-underline-offset: 3px;
}
.cf06meta {
max-width: 1100px;
margin: 18px auto 0;
font:
italic 12px ui-serif,
Georgia,
serif;
color: #6b6056;
text-align: center;
}
@media (max-width: 880px) {
.cf06b {
grid-template-columns: 1fr 1fr;
}
.cf06card {
grid-column: span 2;
max-width: 240px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.cf06b {
grid-template-columns: 1fr;
}
.cf06card {
grid-column: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.cf06card {
transition: none;
}
} <footer class="cf06">
<div class="cf06b">
<div class="cf06card">
<div class="cf06img" aria-hidden="true">⛵</div>
<div class="cf06cap">
<div class="cf06cn">Driftways</div>
<div class="cf06ct">Slow travel · Est. 2018</div>
</div>
</div>
<div class="cf06col">
<h4>Wander</h4>
<a href="#">Destinations</a>
<a href="#">Itineraries</a>
<a href="#">Field guides</a>
<a href="#">Packing lists</a>
<a href="#">Slow trains</a>
</div>
<div class="cf06col">
<h4>Stories</h4>
<a href="#">Recent essays</a>
<a href="#">Photo journals</a>
<a href="#">Reader letters</a>
<a href="#">Audio dispatches</a>
<a href="#">Issue archive</a>
</div>
<div class="cf06col">
<h4>Studio</h4>
<a href="#">About</a>
<a href="#">Contributors</a>
<a href="#">Submissions</a>
<a href="#">Bookshop</a>
<a href="#">Newsletter</a>
</div>
</div>
<div class="cf06meta">
<span>© 2026 Driftways · Made slowly in Lisbon, Tokyo, and Mexico City.</span>
</div>
</footer> 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. Aggressive, confident, and unmistakable. Pure CSS.
.cf07 {
width: 100%;
padding: 36px 32px 24px;
background: #fef0c7;
color: #0a0a0a;
font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
box-sizing: border-box;
border-top: 4px solid #0a0a0a;
}
.cf07b {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 24px;
max-width: 1200px;
margin: 0 auto 28px;
padding-bottom: 28px;
border-bottom: 4px solid #0a0a0a;
}
.cf07brand {
min-width: 0;
padding: 18px 20px;
background: #0a0a0a;
color: #fef0c7;
box-shadow: 6px 6px 0 0 #c43a32;
}
.cf07mark {
font:
900 36px/1 ui-monospace,
"SF Mono",
monospace;
letter-spacing: -0.02em;
}
.cf07tag {
margin-top: 10px;
font:
700 11px/1.4 ui-monospace,
monospace;
letter-spacing: 0.08em;
color: #fef0c7;
opacity: 0.7;
}
.cf07col {
padding: 18px 20px;
background: #fff;
border: 3px solid #0a0a0a;
box-shadow: 4px 4px 0 0 #0a0a0a;
min-width: 0;
transition:
transform 0.12s ease-out,
box-shadow 0.12s ease-out;
}
.cf07col:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 0 #0a0a0a;
}
.cf07col h4 {
margin: 0 0 12px;
font:
900 13px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.06em;
color: #0a0a0a;
padding-bottom: 8px;
border-bottom: 2px solid #0a0a0a;
}
.cf07col a {
display: block;
padding: 4px 0;
font:
600 13px/1.5 ui-sans-serif,
system-ui;
color: #0a0a0a;
text-decoration: none;
transition:
color 0.2s,
padding-left 0.2s;
}
.cf07col a:hover {
color: #c43a32;
padding-left: 4px;
}
.cf07cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1200px;
margin: 0 auto 24px;
padding: 18px 22px;
background: #c43a32;
color: #fef0c7;
border: 3px solid #0a0a0a;
box-shadow: 6px 6px 0 0 #0a0a0a;
flex-wrap: wrap;
}
.cf07cta span {
font:
900 14px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.04em;
}
.cf07cta a {
font:
900 16px/1 ui-monospace,
monospace;
color: #fef0c7;
text-decoration: none;
letter-spacing: -0.01em;
transition: color 0.2s;
}
.cf07cta a:hover {
color: #fff;
}
.cf07meta {
display: flex;
justify-content: space-between;
gap: 18px;
max-width: 1200px;
margin: 0 auto;
font:
700 11px/1 ui-monospace,
monospace;
letter-spacing: 0.08em;
flex-wrap: wrap;
}
@media (max-width: 880px) {
.cf07b {
grid-template-columns: 1fr 1fr;
}
.cf07brand {
grid-column: span 2;
}
}
@media (max-width: 480px) {
.cf07b {
grid-template-columns: 1fr;
}
.cf07brand {
grid-column: auto;
}
.cf07cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.cf07col {
transition: none;
}
} <footer class="cf07">
<div class="cf07b">
<div class="cf07brand">
<div class="cf07mark">/CF/</div>
<div class="cf07tag">DESIGN STUDIO · BERLIN · EST. 2017</div>
</div>
<div class="cf07col">
<h4>WORK</h4>
<a href="#">Selected projects</a>
<a href="#">Case studies</a>
<a href="#">Awards</a>
<a href="#">Press</a>
</div>
<div class="cf07col">
<h4>STUDIO</h4>
<a href="#">About us</a>
<a href="#">Process</a>
<a href="#">Hiring</a>
<a href="#">Contact</a>
</div>
<div class="cf07col">
<h4>WRITE</h4>
<a href="#">Journal</a>
<a href="#">Notes</a>
<a href="#">Talks</a>
<a href="#">Bookshelf</a>
</div>
</div>
<div class="cf07cta">
<span>NEW PROJECT?</span>
<a href="#">[email protected] →</a>
</div>
<div class="cf07meta">
<span>© 2026 — ALL RIGHTS RESERVED.</span>
<span>NO COOKIES. NO TRACKING. NO BS.</span>
</div>
</footer> 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. Three column link sections to the right. CSS animation drives the spin; respects prefers-reduced-motion.
.cf11 {
width: 100%;
padding: 48px 32px 24px;
background: #1c1814;
color: #e8d5a8;
font-family: ui-serif, Georgia, serif;
box-sizing: border-box;
}
.cf11b {
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
max-width: 1100px;
margin: 0 auto 24px;
align-items: center;
padding-bottom: 28px;
border-bottom: 1px solid rgba(232, 213, 168, 0.15);
}
.cf11player {
position: relative;
width: 220px;
height: 220px;
}
.cf11disc {
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, #1c1814 0%, #1c1814 32%, #0a0807 33%, #0a0807 100%);
position: relative;
box-shadow:
inset 0 0 0 1px rgba(232, 213, 168, 0.18),
0 6px 24px rgba(0, 0, 0, 0.6);
animation: cf11-spin 5s linear infinite;
}
.cf11disc::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
background: repeating-radial-gradient(
circle,
transparent 0 4px,
rgba(232, 213, 168, 0.04) 4px 5px
);
pointer-events: none;
}
.cf11disc::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
background: #1c1814;
border-radius: 50%;
border: 1px solid rgba(232, 213, 168, 0.4);
}
.cf11label {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
transform: translate(-50%, -50%);
background: #c43a32;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cf11ln {
font:
700 9px/1 ui-serif,
Georgia,
serif;
color: #fef0c7;
letter-spacing: 0.06em;
}
.cf11ld {
font:
8px/1 ui-serif,
Georgia,
serif;
color: rgba(254, 240, 199, 0.7);
margin-top: 2px;
letter-spacing: 0.04em;
}
@keyframes cf11-spin {
to {
transform: rotate(360deg);
}
}
.cf11arm {
position: absolute;
top: -10px;
right: -22px;
width: 130px;
height: 16px;
transform-origin: right center;
transform: rotate(-22deg);
pointer-events: none;
}
.cf11pivot {
position: absolute;
right: 0;
top: 0;
width: 16px;
height: 16px;
background: #b8860b;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cf11needle {
position: absolute;
left: 0;
top: 7px;
width: 110px;
height: 3px;
background: #d4af37;
border-radius: 1px;
}
.cf11needle::before {
content: "";
position: absolute;
left: -2px;
top: -2px;
width: 7px;
height: 7px;
background: #d4af37;
border-radius: 50%;
}
.cf11side {
min-width: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.cf11brand {
min-width: 0;
}
.cf11logo {
font:
700 22px/1 ui-serif,
Georgia,
serif;
color: #e8d5a8;
margin-bottom: 8px;
}
.cf11brand p {
margin: 0 0 12px;
font:
italic 14px/1.55 ui-serif,
Georgia,
serif;
color: #c4ad7a;
}
.cf11platforms {
font-size: 12px;
}
.cf11platforms a {
color: #d4af37;
text-decoration: none;
transition: color 0.2s;
}
.cf11platforms a:hover {
color: #fef0c7;
text-decoration: underline;
text-underline-offset: 3px;
}
.cf11platforms span {
color: #6b5e3f;
margin: 0 4px;
}
.cf11cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.cf11col {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cf11col h4 {
margin: 0 0 4px;
font:
700 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #d4af37;
}
.cf11col a {
font:
13px/1.5 ui-serif,
Georgia,
serif;
color: #e8d5a8;
text-decoration: none;
transition: color 0.2s;
}
.cf11col a:hover {
color: #fef0c7;
}
.cf11meta {
max-width: 1100px;
margin: 0 auto;
font:
italic 12px ui-serif,
Georgia,
serif;
color: #6b5e3f;
text-align: center;
}
@media (max-width: 880px) {
.cf11b {
grid-template-columns: 1fr;
}
.cf11player {
margin: 0 auto;
}
.cf11cols {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.cf11cols {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.cf11disc {
animation: none;
}
} <footer class="cf11">
<div class="cf11b">
<div class="cf11player">
<div class="cf11disc">
<div class="cf11label">
<div class="cf11ln">Audiograph</div>
<div class="cf11ld">2018-2026</div>
</div>
</div>
<div class="cf11arm" aria-hidden="true">
<div class="cf11pivot"></div>
<div class="cf11needle"></div>
</div>
</div>
<div class="cf11side">
<div class="cf11brand">
<div class="cf11logo">◉ Audiograph</div>
<p>A weekly podcast about analog craft in a digital age.</p>
<div class="cf11platforms">
<a href="#">Spotify</a><span>·</span> <a href="#">Apple</a><span>·</span>
<a href="#">Overcast</a><span>·</span>
<a href="#">RSS</a>
</div>
</div>
<div class="cf11cols">
<div class="cf11col">
<h4>Listen</h4>
<a href="#">Latest episode</a>
<a href="#">Archive</a>
<a href="#">Show notes</a>
</div>
<div class="cf11col">
<h4>About</h4>
<a href="#">Hosts</a>
<a href="#">Patrons</a>
<a href="#">Press</a>
</div>
<div class="cf11col">
<h4>Connect</h4>
<a href="#">Newsletter</a>
<a href="#">Twitter</a>
<a href="#">Contact</a>
</div>
</div>
</div>
</div>
<div class="cf11meta">© 2026 Audiograph · Recorded in a converted barn in upstate New York.</div>
</footer> 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. Three column link sections in muted neon. Pure CSS keyframes drive the flicker.
.cf12 {
position: relative;
width: 100%;
padding: 56px 32px 26px;
background: #0a0612;
color: #e0c8e8;
font-family: "Bebas Neue", "Oswald", ui-sans-serif, system-ui, sans-serif;
overflow: hidden;
box-sizing: border-box;
text-align: center;
}
.cf12bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 30%, rgba(236, 72, 153, 0.25) 0%, transparent 50%),
repeating-linear-gradient(180deg, transparent 0 1px, rgba(255, 255, 255, 0.02) 1px 2px);
pointer-events: none;
}
.cf12brand {
position: relative;
padding-bottom: 32px;
}
.cf12sign {
margin: 0;
font:
800 60px/1 "Bebas Neue",
"Oswald",
ui-sans-serif,
system-ui,
sans-serif;
color: #ff3df5;
letter-spacing: 0.08em;
text-shadow:
0 0 8px #ff3df5,
0 0 18px #ff3df5,
0 0 36px rgba(255, 61, 245, 0.6),
0 0 60px rgba(255, 61, 245, 0.3);
animation: cf12-flicker 5s infinite;
}
.cf12sign span {
color: #3df5ff;
text-shadow:
0 0 8px #3df5ff,
0 0 18px #3df5ff,
0 0 36px rgba(61, 245, 255, 0.6);
margin: 0 4px;
}
@keyframes cf12-flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
text-shadow:
0 0 8px #ff3df5,
0 0 18px #ff3df5,
0 0 36px rgba(255, 61, 245, 0.6),
0 0 60px rgba(255, 61, 245, 0.3);
}
20%,
24%,
55% {
opacity: 0.6;
text-shadow: none;
}
}
.cf12sub {
position: relative;
margin: 14px 0 0;
font:
500 13px/1 ui-sans-serif,
system-ui;
color: #a78bfa;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.cf12b {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
max-width: 720px;
margin: 0 auto 32px;
padding-top: 32px;
border-top: 1px solid rgba(167, 139, 250, 0.2);
}
.cf12col {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.cf12col h4 {
margin: 0 0 6px;
font:
700 12px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ff3df5;
text-shadow: 0 0 6px rgba(255, 61, 245, 0.5);
}
.cf12col a {
font:
14px/1.5 ui-sans-serif,
system-ui;
color: #c4b5fd;
text-decoration: none;
letter-spacing: 0.04em;
transition:
color 0.2s,
text-shadow 0.2s;
}
.cf12col a:hover {
color: #fff;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.cf12meta {
position: relative;
font:
500 11px/1 ui-sans-serif,
system-ui;
color: #6a5a8a;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (max-width: 480px) {
.cf12sign {
font-size: 44px;
}
.cf12b {
grid-template-columns: 1fr;
gap: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.cf12sign {
animation: none;
}
} <footer class="cf12">
<div class="cf12bg" aria-hidden="true"></div>
<div class="cf12brand">
<h2 class="cf12sign">FLUX<span>·</span>BAR</h2>
<p class="cf12sub">Open till sunrise · Brooklyn NY · 21+</p>
</div>
<div class="cf12b">
<div class="cf12col">
<h4>Visit</h4>
<a href="#">Hours</a>
<a href="#">Reservations</a>
<a href="#">Private events</a>
<a href="#">Directions</a>
</div>
<div class="cf12col">
<h4>Tonight</h4>
<a href="#">DJ schedule</a>
<a href="#">Cocktail menu</a>
<a href="#">Specials</a>
<a href="#">Photos</a>
</div>
<div class="cf12col">
<h4>Connect</h4>
<a href="#">Instagram</a>
<a href="#">TikTok</a>
<a href="#">Newsletter</a>
<a href="#">Press</a>
</div>
</div>
<div class="cf12meta">© 2026 Flux · Drink responsibly · Don't drink and drive</div>
</footer> 08 / 15
Editorial Centered
Pure CSS 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.
.cf16 {
width: 100%;
padding: 64px 32px 48px;
background: #fafaf7;
color: #1a1a1a;
font-family: ui-serif, Georgia, "Times New Roman", serif;
box-sizing: border-box;
text-align: center;
}
.cf16inner {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.cf16rule {
width: 64px;
height: 1px;
background: #1a1a1a;
margin-bottom: 36px;
opacity: 0.5;
}
.cf16wordmark {
font-family: ui-serif, Georgia, "Times New Roman", serif;
font-weight: 700;
font-size: 48px;
line-height: 1;
letter-spacing: -0.02em;
color: #1a1a1a;
margin-bottom: 28px;
}
.cf16nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 14px;
margin-bottom: 32px;
}
.cf16nav a {
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.01em;
color: #4a4a4a;
text-decoration: none;
transition: color 0.2s;
}
.cf16nav a:hover {
color: #1a1a1a;
}
.cf16nav span {
color: #c4c4c4;
font-size: 14px;
user-select: none;
}
.cf16meta {
font-family: ui-serif, Georgia, "Times New Roman", serif;
font-style: italic;
font-size: 13px;
color: #8a8a8a;
}
@media (max-width: 600px) {
.cf16 {
padding: 48px 24px 36px;
}
.cf16wordmark {
font-size: 38px;
}
.cf16nav {
gap: 10px;
}
.cf16nav a {
font-size: 13px;
}
} <footer class="cf16">
<div class="cf16inner">
<div class="cf16rule" aria-hidden="true"></div>
<div class="cf16wordmark">Atlas</div>
<nav class="cf16nav">
<a href="#">About</a>
<span aria-hidden="true">·</span>
<a href="#">Pricing</a>
<span aria-hidden="true">·</span>
<a href="#">Docs</a>
<span aria-hidden="true">·</span>
<a href="#">Contact</a>
<span aria-hidden="true">·</span>
<a href="#">Privacy</a>
</nav>
<div class="cf16meta">© 2026 Atlas Studio · Made in Brooklyn</div>
</div>
</footer> 09 / 15
Mega Footer
Pure CSS 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.
.cf17 {
width: 100%;
padding: 56px 32px 22px;
background: #0c1014;
color: #c8cdd4;
font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
box-sizing: border-box;
}
.cf17top {
display: grid;
grid-template-columns: 1.5fr 3fr;
gap: 40px;
max-width: 1280px;
margin: 0 auto 36px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf17brand {
min-width: 0;
}
.cf17logo {
font:
800 24px/1 ui-sans-serif,
system-ui;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.cf17brand p {
margin: 0 0 18px;
font-size: 14px;
color: #8a93a0;
line-height: 1.5;
max-width: 320px;
}
.cf17nf {
display: flex;
gap: 6px;
margin-bottom: 18px;
max-width: 320px;
}
.cf17nf input {
flex: 1;
min-width: 0;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #fff;
font:
13px ui-sans-serif,
system-ui;
outline: none;
transition: border-color 0.2s;
}
.cf17nf input:focus {
border-color: #3b82f6;
}
.cf17nf button {
padding: 9px 14px;
background: #3b82f6;
border: 0;
border-radius: 6px;
color: #fff;
font:
600 12px ui-sans-serif,
system-ui;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
}
.cf17nf button:hover {
background: #2563eb;
}
.cf17social {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cf17social a {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: #c8cdd4;
text-decoration: none;
font-size: 14px;
transition:
background 0.2s,
color 0.2s;
}
.cf17social a:hover {
background: #3b82f6;
color: #fff;
}
.cf17cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
min-width: 0;
}
.cf17col {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
}
.cf17col h4 {
margin: 0 0 6px;
font:
600 12px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
}
.cf17col a {
font-size: 13px;
color: #8a93a0;
text-decoration: none;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.cf17col a:hover {
color: #fff;
}
.cf17badge {
display: inline-block;
padding: 1px 7px;
background: #3b82f6;
border-radius: 999px;
font:
700 10px/1.4 ui-sans-serif,
system-ui;
color: #fff;
}
.cf17bot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1280px;
margin: 0 auto 18px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-wrap: wrap;
}
.cf17trust {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cf17b1 {
padding: 5px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
font:
700 11px/1 ui-sans-serif,
system-ui;
color: #c8cdd4;
letter-spacing: 0.04em;
}
.cf17region {
display: flex;
align-items: center;
gap: 8px;
}
.cf17region select {
padding: 7px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #c8cdd4;
font:
12px ui-sans-serif,
system-ui;
cursor: pointer;
}
.cf17meta {
display: flex;
justify-content: space-between;
gap: 18px;
max-width: 1280px;
margin: 0 auto;
font-size: 12px;
color: #6a7280;
flex-wrap: wrap;
}
.cf17legal {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.cf17legal a {
color: #8a93a0;
text-decoration: none;
transition: color 0.2s;
}
.cf17legal a:hover {
color: #fff;
}
@media (max-width: 880px) {
.cf17top {
grid-template-columns: 1fr;
}
.cf17cols {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.cf17cols {
grid-template-columns: 1fr;
}
} <footer class="cf17">
<div class="cf17top">
<div class="cf17brand">
<div class="cf17logo">▲ Helix</div>
<p>The composable infrastructure for modern teams.</p>
<form class="cf17nf">
<input type="email" placeholder="Email address" aria-label="Email" />
<button type="submit">Subscribe</button>
</form>
<div class="cf17social">
<a href="#" aria-label="Twitter">𝕏</a>
<a href="#" aria-label="GitHub">◐</a>
<a href="#" aria-label="LinkedIn">in</a>
<a href="#" aria-label="YouTube">▶</a>
<a href="#" aria-label="Instagram">◉</a>
<a href="#" aria-label="Discord">⌬</a>
</div>
</div>
<div class="cf17cols">
<div class="cf17col">
<h4>Product</h4>
<a href="#">Overview</a>
<a href="#">Features</a>
<a href="#">Integrations</a>
<a href="#">Pricing</a>
<a href="#">Changelog</a>
<a href="#">Roadmap</a>
<a href="#">Status</a>
</div>
<div class="cf17col">
<h4>Solutions</h4>
<a href="#">Startups</a>
<a href="#">Enterprise</a>
<a href="#">Agencies</a>
<a href="#">Education</a>
<a href="#">Non-profits</a>
<a href="#">Developers</a>
</div>
<div class="cf17col">
<h4>Resources</h4>
<a href="#">Documentation</a>
<a href="#">API reference</a>
<a href="#">Guides</a>
<a href="#">Templates</a>
<a href="#">Customer stories</a>
<a href="#">Blog</a>
<a href="#">Webinars</a>
</div>
<div class="cf17col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers <span class="cf17badge">12</span></a>
<a href="#">Press</a>
<a href="#">Contact</a>
<a href="#">Partners</a>
<a href="#">Investors</a>
</div>
</div>
</div>
<div class="cf17bot">
<div class="cf17trust">
<span class="cf17b1">SOC 2</span>
<span class="cf17b1">GDPR</span>
<span class="cf17b1">ISO 27001</span>
<span class="cf17b1">HIPAA</span>
</div>
<div class="cf17region">
<span>🌐</span>
<select aria-label="Region">
<option>United States</option>
<option>Europe</option>
<option>Asia Pacific</option>
</select>
</div>
</div>
<div class="cf17meta">
<span>© 2026 Helix Labs, Inc.</span>
<div class="cf17legal">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
<a href="#">Security</a>
<a href="#">DPA</a>
<a href="#">Sitemap</a>
</div>
</div>
</footer> 10 / 15
Contact Card
Pure CSS 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.
.cf18 {
width: 100%;
padding: 48px 32px 22px;
background: #faf6ed;
color: #2a2520;
font-family: ui-serif, Georgia, serif;
box-sizing: border-box;
}
.cf18b {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 36px;
max-width: 1100px;
margin: 0 auto 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(42, 37, 32, 0.18);
}
.cf18contact {
min-width: 0;
}
.cf18head {
margin-bottom: 24px;
}
.cf18logo {
font:
700 22px/1 ui-serif,
Georgia,
serif;
color: #2a2520;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.cf18head p {
margin: 0;
font:
italic 13px/1.4 ui-serif,
Georgia,
serif;
color: #6b6056;
}
.cf18grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
min-width: 0;
}
.cf18item {
display: flex;
gap: 12px;
align-items: flex-start;
min-width: 0;
}
.cf18ico {
font-size: 18px;
flex-shrink: 0;
line-height: 1.4;
}
.cf18item strong {
display: block;
font:
700 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c43a32;
margin-bottom: 5px;
}
.cf18item div div {
font:
14px/1.55 ui-serif,
Georgia,
serif;
color: #2a2520;
}
.cf18map {
min-width: 0;
}
.cf18map svg {
width: 100%;
height: auto;
aspect-ratio: 1;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(42, 37, 32, 0.18);
}
.cf18mc {
margin-top: 10px;
text-align: center;
font:
600 13px/1 ui-sans-serif,
system-ui;
color: #c43a32;
cursor: pointer;
}
.cf18mc:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.cf18foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1100px;
margin: 0 auto;
flex-wrap: wrap;
font:
italic 12px ui-serif,
Georgia,
serif;
color: #6b6056;
}
.cf18nav {
display: flex;
gap: 22px;
flex-wrap: wrap;
}
.cf18nav a {
font:
14px/1 ui-serif,
Georgia,
serif;
color: #2a2520;
text-decoration: none;
transition: color 0.2s;
}
.cf18nav a:hover {
color: #c43a32;
}
@media (max-width: 880px) {
.cf18b {
grid-template-columns: 1fr;
}
.cf18map svg {
max-width: 280px;
margin: 0 auto;
display: block;
}
}
@media (max-width: 480px) {
.cf18grid {
grid-template-columns: 1fr;
}
} <footer class="cf18">
<div class="cf18b">
<div class="cf18contact">
<div class="cf18head">
<div class="cf18logo">⚐ Northway Studio</div>
<p>Architecture & interior design · Brooklyn NY</p>
</div>
<div class="cf18grid">
<div class="cf18item">
<span class="cf18ico">📍</span>
<div>
<strong>Visit</strong>
<div>247 Atlantic Ave<br />Brooklyn, NY 11217</div>
</div>
</div>
<div class="cf18item">
<span class="cf18ico">📞</span>
<div>
<strong>Call</strong>
<div>+1 (718) 555-0247<br />Mon–Fri 9am–6pm</div>
</div>
</div>
<div class="cf18item">
<span class="cf18ico">✉</span>
<div>
<strong>Email</strong>
<div>[email protected]<br />[email protected]</div>
</div>
</div>
<div class="cf18item">
<span class="cf18ico">⏱</span>
<div>
<strong>Hours</strong>
<div>Tue–Sat 10am–5pm<br />Sun–Mon by appointment</div>
</div>
</div>
</div>
</div>
<div class="cf18map">
<svg viewBox="0 0 200 200" aria-hidden="true">
<rect width="200" height="200" fill="#e6e2d6" />
<path d="M0 60 L200 80" stroke="#c4bca6" stroke-width="2" fill="none" />
<path d="M0 120 L200 140" stroke="#c4bca6" stroke-width="2" fill="none" />
<path d="M40 0 L60 200" stroke="#c4bca6" stroke-width="2" fill="none" />
<path d="M120 0 L140 200" stroke="#c4bca6" stroke-width="2" fill="none" />
<path d="M0 100 Q 100 90 200 105" stroke="#a8c5b0" stroke-width="3" fill="none" />
<circle cx="100" cy="100" r="10" fill="#c43a32" />
<circle cx="100" cy="100" r="4" fill="#fff" />
</svg>
<div class="cf18mc">View directions →</div>
</div>
</div>
<div class="cf18foot">
<nav class="cf18nav">
<a href="#">Projects</a>
<a href="#">About</a>
<a href="#">Press</a>
<a href="#">Careers</a>
</nav>
<span>© 2026 Northway Studio LLC</span>
</div>
</footer> 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. Pure CSS, no JS.
.cf19 {
width: 100%;
padding: 48px 32px 22px;
background: #f8f8f5;
color: #1a1a1a;
font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
box-sizing: border-box;
}
.cf19top {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 36px;
max-width: 1200px;
margin: 0 auto 32px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.cf19quote {
padding: 22px 24px;
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}
.cf19stars {
color: #f59e0b;
font-size: 14px;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.cf19quote blockquote {
margin: 0 0 16px;
font:
17px/1.55 ui-serif,
Georgia,
serif;
color: #1a1a1a;
}
.cf19who {
display: flex;
align-items: center;
gap: 12px;
}
.cf19avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff 0%, #ec4899 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font:
700 13px ui-sans-serif,
system-ui;
flex-shrink: 0;
}
.cf19who strong {
display: block;
font:
600 13px/1.2 ui-sans-serif,
system-ui;
}
.cf19who span {
font:
12px/1.4 ui-sans-serif,
system-ui;
color: #6a6a6a;
}
.cf19trust {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.cf19trust h4 {
margin: 0;
font:
600 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6a6a6a;
}
.cf19logos {
display: flex;
gap: 22px;
flex-wrap: wrap;
align-items: center;
}
.cf19logos span {
font:
800 14px/1 ui-sans-serif,
"Inter",
system-ui;
color: #4a4a4a;
letter-spacing: 0.04em;
opacity: 0.65;
transition: opacity 0.2s;
}
.cf19logos span:hover {
opacity: 1;
}
.cf19badges {
display: flex;
gap: 10px;
margin-top: 4px;
flex-wrap: wrap;
}
.cf19b {
padding: 6px 12px;
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.12);
border-radius: 6px;
font:
700 11px/1 ui-sans-serif,
system-ui;
color: #1a1a1a;
letter-spacing: 0.04em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.cf19links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
max-width: 1200px;
margin: 0 auto 24px;
}
.cf19col {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.cf19col h4 {
margin: 0 0 6px;
font:
600 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1a1a;
}
.cf19col a {
font-size: 13px;
color: #4a4a4a;
text-decoration: none;
transition: color 0.2s;
}
.cf19col a:hover {
color: #1a1a1a;
text-decoration: underline;
text-underline-offset: 3px;
}
.cf19meta {
max-width: 1200px;
margin: 0 auto;
padding-top: 20px;
border-top: 1px solid rgba(26, 26, 26, 0.06);
font-size: 12px;
color: #8a8a8a;
text-align: center;
}
@media (max-width: 880px) {
.cf19top {
grid-template-columns: 1fr;
}
.cf19links {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.cf19links {
grid-template-columns: 1fr;
}
} <footer class="cf19">
<div class="cf19top">
<div class="cf19quote">
<div class="cf19stars">★★★★★</div>
<blockquote>
"Cut our deployment time from 2 hours to 7 minutes. The team has been responsive and the
platform is rock-solid."
</blockquote>
<div class="cf19who">
<div class="cf19avatar">SK</div>
<div>
<strong>Sarah Kim</strong>
<span>VP Engineering · Atlas Corp</span>
</div>
</div>
</div>
<div class="cf19trust">
<h4>Trusted by teams at</h4>
<div class="cf19logos">
<span>STRIPE</span>
<span>NOTION</span>
<span>LINEAR</span>
<span>VERCEL</span>
<span>RAYCAST</span>
</div>
<div class="cf19badges">
<div class="cf19b">SOC 2</div>
<div class="cf19b">GDPR</div>
<div class="cf19b">ISO 27001</div>
</div>
</div>
</div>
<div class="cf19links">
<div class="cf19col">
<h4>Product</h4>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Changelog</a>
</div>
<div class="cf19col">
<h4>Resources</h4>
<a href="#">Docs</a>
<a href="#">API</a>
<a href="#">Tutorials</a>
</div>
<div class="cf19col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Contact</a>
</div>
<div class="cf19col">
<h4>Legal</h4>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">DPA</a>
</div>
</div>
<div class="cf19meta">© 2026 Stack Inc. — Built in Berlin and Toronto.</div>
</footer> 12 / 15
FAQ Drawer
Pure CSS 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.
.cf20 {
width: 100%;
padding: 44px 32px 20px;
background: #1a1d24;
color: #c8cdd4;
font-family: ui-sans-serif, system-ui, sans-serif;
box-sizing: border-box;
}
.cf20faq {
max-width: 760px;
margin: 0 auto 36px;
}
.cf20h {
margin: 0 0 20px;
font:
700 22px/1.2 ui-sans-serif,
system-ui;
color: #fff;
text-align: center;
letter-spacing: -0.01em;
}
.cf20d {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 14px 0;
}
.cf20d:first-of-type {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cf20d summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 4px 4px;
font:
600 15px/1.4 ui-sans-serif,
system-ui;
color: #fff;
cursor: pointer;
list-style: none;
}
.cf20d summary::-webkit-details-marker {
display: none;
}
.cf20d summary:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 4px;
border-radius: 4px;
}
.cf20arr {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border-radius: 50%;
font:
600 16px ui-sans-serif,
system-ui;
color: #c8cdd4;
flex-shrink: 0;
transition:
transform 0.25s,
background 0.2s;
}
.cf20d[open] .cf20arr {
transform: rotate(45deg);
background: #3b82f6;
color: #fff;
}
.cf20a {
padding: 12px 4px 4px;
font:
14px/1.65 ui-sans-serif,
system-ui;
color: #8a93a0;
max-width: 600px;
}
.cf20links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 760px;
margin: 0 auto 22px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cf20col {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cf20col h4 {
margin: 0 0 4px;
font:
600 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.cf20col a {
font-size: 13px;
color: #8a93a0;
text-decoration: none;
transition: color 0.2s;
}
.cf20col a:hover {
color: #fff;
}
.cf20meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: 760px;
margin: 0 auto;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 12px;
color: #6a7280;
flex-wrap: wrap;
}
.cf20more {
color: #3b82f6;
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
.cf20more:hover {
color: #60a5fa;
}
@media (max-width: 600px) {
.cf20links {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 400px) {
.cf20links {
grid-template-columns: 1fr;
}
} <footer class="cf20">
<div class="cf20faq">
<h3 class="cf20h">Need a hand?</h3>
<details class="cf20d">
<summary>How do I get started?<span class="cf20arr">+</span></summary>
<div class="cf20a">
Sign up for a free account, install the SDK with one command, and follow the 5-minute
Quickstart in our docs.
</div>
</details>
<details class="cf20d">
<summary>What does it cost?<span class="cf20arr">+</span></summary>
<div class="cf20a">
The free tier covers up to 10,000 requests/month. Paid plans start at $29/month and scale by
usage. See pricing.
</div>
</details>
<details class="cf20d">
<summary>Is there an SLA?<span class="cf20arr">+</span></summary>
<div class="cf20a">
Pro and Enterprise plans include a 99.9% uptime SLA with credits if we miss it. Status page
lives at status.example.com.
</div>
</details>
<details class="cf20d">
<summary>How do I cancel?<span class="cf20arr">+</span></summary>
<div class="cf20a">
Cancel anytime from billing settings. We prorate refunds for annual plans and don't ask why
— though we appreciate when you tell us.
</div>
</details>
</div>
<div class="cf20links">
<div class="cf20col">
<h4>Product</h4>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Docs</a>
</div>
<div class="cf20col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Press</a>
</div>
<div class="cf20col">
<h4>Legal</h4>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
</div>
</div>
<div class="cf20meta">
<span>© 2026 Replica Software</span>
<a href="#" class="cf20more">Read full FAQ →</a>
</div>
</footer> 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.
.cf21 {
width: 100%;
background: #0e0e14;
color: #c8cdd4;
font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
box-sizing: border-box;
}
.cf21cta {
background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
padding: 40px 32px;
}
.cf21ctab {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.cf21ctah h2 {
margin: 0 0 8px;
font:
800 30px/1.1 ui-sans-serif,
"Inter",
system-ui;
color: #fff;
letter-spacing: -0.02em;
}
.cf21ctah p {
margin: 0;
font:
16px/1.5 ui-sans-serif,
system-ui;
color: rgba(255, 255, 255, 0.85);
}
.cf21btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.cf21prim {
padding: 12px 22px;
background: #fff;
border-radius: 8px;
color: #1a1a1a;
font:
700 14px ui-sans-serif,
system-ui;
text-decoration: none;
transition:
transform 0.15s,
box-shadow 0.15s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cf21prim:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
.cf21sec {
padding: 12px 22px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: #fff;
font:
700 14px ui-sans-serif,
system-ui;
text-decoration: none;
transition: background 0.2s;
backdrop-filter: blur(8px);
}
.cf21sec:hover {
background: rgba(255, 255, 255, 0.22);
}
.cf21foot {
padding: 36px 32px 22px;
}
.cf21b {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 36px;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf21brand {
min-width: 0;
}
.cf21logo {
font:
800 20px/1 ui-sans-serif,
system-ui;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.cf21brand p {
margin: 0;
font-size: 13px;
color: #8a93a0;
line-height: 1.5;
max-width: 240px;
}
.cf21cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
min-width: 0;
}
.cf21col {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cf21col h4 {
margin: 0 0 4px;
font:
600 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.cf21col a {
font-size: 13px;
color: #8a93a0;
text-decoration: none;
transition: color 0.2s;
}
.cf21col a:hover {
color: #fff;
}
.cf21meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1200px;
margin: 0 auto;
padding-top: 18px;
font-size: 12px;
color: #6a7280;
flex-wrap: wrap;
}
.cf21legal {
display: flex;
gap: 18px;
}
.cf21legal a {
color: #8a93a0;
text-decoration: none;
transition: color 0.2s;
}
.cf21legal a:hover {
color: #fff;
}
@media (max-width: 880px) {
.cf21b {
grid-template-columns: 1fr;
}
.cf21cols {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.cf21cols {
grid-template-columns: 1fr;
}
.cf21ctah h2 {
font-size: 24px;
}
} <footer class="cf21">
<div class="cf21cta">
<div class="cf21ctab">
<div class="cf21ctah">
<h2>Ready to ship?</h2>
<p>Start free. Upgrade when you're ready. No credit card needed.</p>
</div>
<div class="cf21btns">
<a href="#" class="cf21prim">Start free →</a>
<a href="#" class="cf21sec">Talk to sales</a>
</div>
</div>
</div>
<div class="cf21foot">
<div class="cf21b">
<div class="cf21brand">
<div class="cf21logo">▸ Pulse</div>
<p>Real-time analytics for product teams.</p>
</div>
<div class="cf21cols">
<div class="cf21col">
<h4>Product</h4>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Integrations</a>
<a href="#">Changelog</a>
</div>
<div class="cf21col">
<h4>Resources</h4>
<a href="#">Docs</a>
<a href="#">API</a>
<a href="#">Examples</a>
<a href="#">Status</a>
</div>
<div class="cf21col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Press</a>
<a href="#">Contact</a>
</div>
</div>
</div>
<div class="cf21meta">
<span>© 2026 Pulse Analytics</span>
<div class="cf21legal">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Security</a>
</div>
</div>
</div>
</footer> 14 / 15
Globe Switcher
Pure CSS 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.
.cf22 {
width: 100%;
padding: 48px 32px 22px;
background: #0a1628;
color: #c8d4e8;
font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
box-sizing: border-box;
}
.cf22b {
max-width: 1200px;
margin: 0 auto 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf22cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 28px;
margin-bottom: 32px;
}
.cf22brand {
min-width: 0;
}
.cf22logo {
font:
800 22px/1 ui-sans-serif,
system-ui;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 10px;
}
.cf22brand p {
margin: 0;
font-size: 13px;
color: #8a98b8;
line-height: 1.5;
}
.cf22col {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.cf22col h4 {
margin: 0 0 4px;
font:
600 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.cf22col a {
font-size: 13px;
color: #8a98b8;
text-decoration: none;
transition: color 0.2s;
}
.cf22col a:hover {
color: #fff;
}
.cf22pickers {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
gap: 18px;
padding: 20px 22px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}
.cf22pick {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cf22pick label {
font:
600 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.06em;
color: #c8d4e8;
}
.cf22pick select {
padding: 9px 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 7px;
color: #fff;
font:
13px ui-sans-serif,
system-ui;
cursor: pointer;
outline: none;
transition: border-color 0.2s;
}
.cf22pick select:focus {
border-color: #60a5fa;
}
.cf22pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cf22pill {
padding: 7px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
font:
700 12px/1 ui-sans-serif,
system-ui;
color: #c8d4e8;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
color 0.2s;
}
.cf22pill:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.cf22-on {
background: #60a5fa;
border-color: #60a5fa;
color: #0a1628;
}
.cf22-on:hover {
background: #3b82f6;
color: #fff;
}
.cf22meta {
display: flex;
justify-content: space-between;
gap: 18px;
max-width: 1200px;
margin: 0 auto;
font-size: 12px;
color: #6a7a99;
flex-wrap: wrap;
}
.cf22legal {
display: flex;
gap: 18px;
}
.cf22legal a {
color: #8a98b8;
text-decoration: none;
transition: color 0.2s;
}
.cf22legal a:hover {
color: #fff;
}
@media (max-width: 880px) {
.cf22cols {
grid-template-columns: 1fr 1fr;
}
.cf22brand {
grid-column: span 2;
}
.cf22pickers {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.cf22cols {
grid-template-columns: 1fr;
}
.cf22brand {
grid-column: auto;
}
} <footer class="cf22">
<div class="cf22b">
<div class="cf22cols">
<div class="cf22brand">
<div class="cf22logo">◯ Meridian</div>
<p>Payments infrastructure for the global internet.</p>
</div>
<div class="cf22col">
<h4>Products</h4>
<a href="#">Payments</a>
<a href="#">Billing</a>
<a href="#">Connect</a>
<a href="#">Issuing</a>
</div>
<div class="cf22col">
<h4>Use cases</h4>
<a href="#">Marketplaces</a>
<a href="#">SaaS</a>
<a href="#">Retail</a>
<a href="#">Platforms</a>
</div>
<div class="cf22col">
<h4>Resources</h4>
<a href="#">Docs</a>
<a href="#">API</a>
<a href="#">Pricing</a>
<a href="#">Support</a>
</div>
<div class="cf22col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Customers</a>
<a href="#">Jobs</a>
<a href="#">Newsroom</a>
</div>
</div>
<div class="cf22pickers">
<div class="cf22pick">
<label>🌐 Language</label>
<select aria-label="Language">
<option>English (US)</option>
<option>Français</option>
<option>Deutsch</option>
<option>日本語</option>
<option>中文</option>
</select>
</div>
<div class="cf22pick">
<label>💱 Currency</label>
<select aria-label="Currency">
<option>USD ($)</option>
<option>EUR (€)</option>
<option>GBP (£)</option>
<option>JPY (¥)</option>
<option>SGD (S$)</option>
</select>
</div>
<div class="cf22pick cf22regions">
<label>📍 Region</label>
<div class="cf22pills">
<span class="cf22pill cf22-on">US</span>
<span class="cf22pill">EU</span>
<span class="cf22pill">APAC</span>
<span class="cf22pill">LATAM</span>
</div>
</div>
</div>
</div>
<div class="cf22meta">
<span>© 2026 Meridian Payments — Available in 47 countries</span>
<div class="cf22legal">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Compliance</a>
</div>
</div>
</footer> 15 / 15
Hover Wave
CSS + JS 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.
.cf23 {
position: relative;
width: 100%;
padding: 56px 32px 22px;
background: #fef9f0;
color: #2a2520;
font-family: ui-serif, Georgia, serif;
box-sizing: border-box;
}
.cf23top {
position: absolute;
top: -22px;
right: 32px;
width: 44px;
height: 44px;
border-radius: 50%;
background: #c43a32;
color: #fef9f0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 6px 18px rgba(196, 58, 50, 0.35);
transition:
transform 0.2s,
box-shadow 0.2s;
cursor: pointer;
}
.cf23top:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(196, 58, 50, 0.45);
}
.cf23top span {
font:
700 22px/1 ui-sans-serif,
system-ui;
}
.cf23b {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 36px;
max-width: 1200px;
margin: 0 auto 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(42, 37, 32, 0.18);
}
.cf23brand {
min-width: 0;
}
.cf23logo {
font:
700 22px/1 ui-serif,
Georgia,
serif;
color: #2a2520;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.cf23brand p {
margin: 0;
font:
italic 14px/1.55 ui-serif,
Georgia,
serif;
color: #6b6056;
max-width: 240px;
}
.cf23cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
min-width: 0;
}
.cf23col {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
}
.cf23col h4 {
margin: 0 0 4px;
font:
700 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c43a32;
}
.cf23col a {
position: relative;
padding-bottom: 4px;
font:
14px/1.4 ui-serif,
Georgia,
serif;
color: #2a2520;
text-decoration: none;
transition: color 0.25s;
align-self: flex-start;
}
.cf23col a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0 6 3 T 12 3 T 18 3 T 24 3' stroke='%23c43a32' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 12px 6px;
background-position: 0 100%;
transform-origin: left center;
transform: scaleX(0);
transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.cf23col a:hover {
color: #c43a32;
}
.cf23col a:hover::after {
transform: scaleX(1);
}
.cf23meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1200px;
margin: 0 auto;
font:
italic 12px/1.5 ui-serif,
Georgia,
serif;
color: #8a7d6f;
flex-wrap: wrap;
}
.cf23legal {
display: flex;
gap: 18px;
}
.cf23legal a {
color: #6b6056;
text-decoration: none;
transition: color 0.2s;
font-style: normal;
}
.cf23legal a:hover {
color: #c43a32;
}
@media (max-width: 880px) {
.cf23b {
grid-template-columns: 1fr;
}
.cf23cols {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.cf23cols {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.cf23col a::after {
transition: none;
}
.cf23top {
transition: none;
}
} <footer class="cf23">
<a href="#top" class="cf23top" data-cf23-top aria-label="Back to top"><span>↑</span></a>
<div class="cf23b">
<div class="cf23brand">
<div class="cf23logo">◆ Wavelength</div>
<p>The newsletter app for thoughtful writers.</p>
</div>
<div class="cf23cols">
<div class="cf23col">
<h4>Product</h4>
<a href="#">Editor</a>
<a href="#">Distribution</a>
<a href="#">Analytics</a>
<a href="#">Pricing</a>
</div>
<div class="cf23col">
<h4>Writers</h4>
<a href="#">Featured</a>
<a href="#">Get started</a>
<a href="#">Migrate</a>
<a href="#">Community</a>
</div>
<div class="cf23col">
<h4>Readers</h4>
<a href="#">Discover</a>
<a href="#">Categories</a>
<a href="#">Mobile app</a>
<a href="#">Recommendations</a>
</div>
<div class="cf23col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Blog</a>
<a href="#">Press</a>
</div>
</div>
</div>
<div class="cf23meta">
<span>© 2026 Wavelength · Made for writers, by writers.</span>
<div class="cf23legal">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Contact</a>
</div>
</div>
</footer> /* Hover Wave + Back-to-Top — handles only the scroll-to-top behavior;
the wave underline is pure CSS. */
(function () {
var btn = document.querySelector("[data-cf23-top]");
if (!btn) return;
btn.addEventListener("click", function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
});
})();
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