🦶 Footer Designs
6 footer designs — responsive, copy-ready HTML + CSS
6 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.
HTML + CSS · self-contained20 lines
<footer class="nxf1">
<a href="#" class="nxf1-brand">Brand</a>
<nav class="nxf1-links" aria-label="Footer">
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Careers</a>
<a href="#">Privacy</a>
<a href="#">Contact</a>
</nav>
<p class="nxf1-copy">© 2026 Brand Inc. All rights reserved.</p>
</footer>
<style>
.nxf1, .nxf1 * { box-sizing: border-box; }
.nxf1 { width: 100%; padding: 36px 20px 28px; background: #fff; border-top: 1px solid #ece4d8; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxf1-brand { display: inline-block; margin-bottom: 14px; color: #2a1f1a; font: 700 22px/1.2 Georgia,"Times New Roman",serif; text-decoration: none; }
.nxf1-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin-bottom: 14px; }
.nxf1-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #5e503f; font-size: 15px; text-decoration: none; }
.nxf1-links a:hover { color: #a24832; text-decoration: underline; text-underline-offset: 4px; }
.nxf1-copy { margin: 0; color: #8a7f73; font-size: 13.5px; }
</style>
HTML + CSS · self-contained42 lines
<footer class="nxf2">
<div class="nxf2-grid">
<div class="nxf2-brand">
<a href="#" class="nxf2-logo">Brand</a>
<p>Tools for small teams who care about craft.</p>
</div>
<nav aria-label="Product">
<h4>Product</h4>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Changelog</a>
</nav>
<nav aria-label="Company">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Press</a>
</nav>
<nav aria-label="Support">
<h4>Support</h4>
<a href="#">Help centre</a>
<a href="#">Contact</a>
<a href="#">Status</a>
</nav>
</div>
<div class="nxf2-bottom">
<span>© 2026 Brand Inc.</span>
<span><a href="#">Terms</a> · <a href="#">Privacy</a></span>
</div>
</footer>
<style>
.nxf2, .nxf2 * { box-sizing: border-box; }
.nxf2 { width: 100%; padding: 40px clamp(20px, 4vw, 40px) 20px; background: #faf6f0; border-top: 1px solid #e6dccd; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxf2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 28px 24px; }
.nxf2-logo { color: #2a1f1a; font: 700 22px/1.2 Georgia,"Times New Roman",serif; text-decoration: none; }
.nxf2-brand p { margin: 10px 0 0; max-width: 240px; color: #6d645a; font-size: 14.5px; line-height: 1.55; }
.nxf2 h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #8a7f73; }
.nxf2 nav a { display: flex; align-items: center; min-height: 40px; color: #2a1f1a; font-size: 15px; text-decoration: none; }
.nxf2 nav a:hover { color: #a24832; }
.nxf2-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 32px; padding-top: 16px; border-top: 1px solid #e6dccd; color: #8a7f73; font-size: 13.5px; }
.nxf2-bottom a { color: inherit; }
</style>
HTML + CSS · self-contained35 lines
<footer class="nxf3">
<div class="nxf3-top">
<div>
<h3>Stay in the loop</h3>
<p>One short email a month. No spam, ever.</p>
</div>
<form class="nxf3-form" action="#" method="post">
<label class="nxf3-sr" for="nxf3-email">Email address</label>
<input id="nxf3-email" type="email" placeholder="[email protected]" autocomplete="email" required>
<button type="submit">Subscribe</button>
</form>
</div>
<div class="nxf3-bottom">
<nav aria-label="Footer"><a href="#">Docs</a><a href="#">Blog</a><a href="#">Careers</a><a href="#">Legal</a></nav>
<span>© 2026 Brand</span>
</div>
</footer>
<style>
.nxf3, .nxf3 * { box-sizing: border-box; }
.nxf3 { width: 100%; padding: 36px clamp(20px, 4vw, 40px) 18px; background: #17140f; color: #e9e2d8; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxf3-top { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.nxf3 h3 { margin: 0 0 6px; color: #fff; font: 700 22px/1.25 Georgia,"Times New Roman",serif; }
.nxf3 p { margin: 0; color: #a99f92; font-size: 15px; }
.nxf3-form { display: flex; flex: 1 1 300px; max-width: 420px; gap: 8px; }
.nxf3-form input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid #3a332b; border-radius: 10px; background: #221d17; color: #fff; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; }
.nxf3-form input:focus { border-color: #e0603a; }
.nxf3-form button { min-height: 46px; padding: 0 20px; border: 0; border-radius: 10px; background: #e0603a; color: #fff; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxf3-form button:hover { background: #c4573c; }
.nxf3-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-top: 10px; color: #8d8478; font-size: 13.5px; }
.nxf3-bottom nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -10px; }
.nxf3-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #c9c0b4; text-decoration: none; }
.nxf3-bottom a:hover { color: #fff; }
.nxf3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 420px) { .nxf3-form { flex-direction: column; } }
</style>
HTML + CSS · self-contained18 lines
<footer class="nxf4">
<span class="nxf4-copy">© 2026 Studio Nine</span>
<nav aria-label="Footer">
<a href="#">Instagram</a>
<a href="#">Dribbble</a>
<a href="#">Email</a>
</nav>
<a href="#" class="nxf4-top">Back to top ↑</a>
</footer>
<style>
.nxf4, .nxf4 * { box-sizing: border-box; }
.nxf4 { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; justify-content: space-between; width: 100%; padding: 12px 20px; border-top: 1px solid #2a1f1a; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; font-size: 14.5px; }
.nxf4 nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.nxf4 a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: #2a1f1a; text-decoration: none; }
.nxf4 a:hover { color: #a24832; text-decoration: underline; text-underline-offset: 4px; }
.nxf4-copy { color: #6d645a; }
@media (max-width: 520px) { .nxf4 { flex-direction: column; align-items: flex-start; } .nxf4 nav { margin-left: -8px; } .nxf4-top { margin-left: -8px; } }
</style>
HTML + CSS · self-contained23 lines
<footer class="nxf5">
<p class="nxf5-brand">Brand<span>.</span></p>
<p class="nxf5-text">Follow along for updates, tips and behind-the-scenes.</p>
<div class="nxf5-social">
<a href="#" aria-label="X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a>
<a href="#" aria-label="GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2-6-2.5m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12 12 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg></a>
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".6"/></svg></a>
<a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"/></svg></a>
</div>
<p class="nxf5-copy">© 2026 Brand · Made with care</p>
</footer>
<style>
.nxf5, .nxf5 * { box-sizing: border-box; }
.nxf5 { width: 100%; padding: 36px 20px 24px; border-radius: 20px; background: #f3e2d9; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxf5-brand { margin: 0 0 6px; font: 800 24px/1.2 Georgia,"Times New Roman",serif; }
.nxf5-brand span { color: #a24832; }
.nxf5-text { margin: 0 auto 18px; max-width: 340px; color: #5e503f; font-size: 15px; line-height: 1.5; }
.nxf5-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.nxf5-social a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #2a1f1a; transition: background .2s, color .2s, transform .2s; }
.nxf5-social a:hover { background: #2a1f1a; color: #fff; transform: translateY(-2px); }
.nxf5-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nxf5-copy { margin: 0; color: #7a6c5d; font-size: 13px; }
</style>
HTML + CSS · self-contained26 lines
<footer class="nxf6">
<div class="nxf6-cta">
<h2>Have a project in mind?</h2>
<a href="#" class="nxf6-btn">Let’s talk <span aria-hidden="true">→</span></a>
</div>
<div class="nxf6-cols">
<div><h4>Studio</h4><p>12 Harbour Street<br>Bristol BS1 4AA</p></div>
<div><h4>Contact</h4><p><a href="#">[email protected]</a><br><a href="#">+44 20 7946 0000</a></p></div>
<div><h4>Social</h4><p><a href="#">Instagram</a><br><a href="#">LinkedIn</a></p></div>
</div>
<p class="nxf6-copy">© 2026 Studio Co.</p>
</footer>
<style>
.nxf6, .nxf6 * { box-sizing: border-box; }
.nxf6 { width: 100%; padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 48px) 20px; border-radius: 20px; background: #a24832; color: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxf6-cta { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.25); }
.nxf6 h2 { margin: 0; font: 400 clamp(28px, 5.5vw, 46px)/1.1 Georgia,"Times New Roman",serif; }
.nxf6-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #fff; color: #a24832; font-weight: 700; font-size: 16px; text-decoration: none; }
.nxf6-btn:hover { background: #2a1f1a; color: #fff; }
.nxf6-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 20px; padding: 24px 0; }
.nxf6 h4 { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.nxf6-cols p { margin: 0; font-size: 15px; line-height: 1.9; }
.nxf6-cols a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.nxf6-cols a:hover { border-bottom-color: #fff; }
.nxf6-copy { margin: 0; color: rgba(255,255,255,.7); font-size: 13px; }
</style>
Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.
What Is This?
- Collection of website footer designs
- Includes multi-column, minimal, and newsletter variants
- Dark and light theme options available
- Proper link hierarchy and layout structure
- Copy and adapt to any website project
How to Use
- Browse footer design options in the gallery
- Preview each footer with realistic content and links
- Copy the HTML and CSS code
- Replace placeholder links and text with your own
- Customize colors and layout to match your site
Use Cases
- Adding professional footers to websites
- Finding footer layout patterns for different site types
- Building footers with newsletter signup integration
- Creating consistent footer designs across multiple pages
- Learning CSS grid and flexbox through footer layouts