Lab

Footer Lab

Seven footer patterns — from minimal inline bars to mega sitemap grids and gradient subscribe bars.

1. Minimal — single row, copyright + links
<footer>
  <div>© 2026 Studio Lakewood</div>
  <div class="links">
    <a href="#">Privacy</a>
    <a href="#">Terms</a>
    <a href="#">Contact</a>
  </div>
</footer>
footer {
  padding: 28px 30px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #666;
}
.links { display: flex; gap: 20px; }
2. Mega Sitemap — 4–5 columns of links, perfect for large sites
<footer>
  <div class="cols">
    <div>
      <div class="brand">studio.</div>
      <div class="tagline">A design studio for brands who want to stop blending in.</div>
      <div class="social">
        <a href="#"><i class="ph ph-twitter-logo"></i></a>
        <a href="#"><i class="ph ph-instagram-logo"></i></a>
        <a href="#"><i class="ph ph-dribbble-logo"></i></a>
        <a href="#"><i class="ph ph-linkedin-logo"></i></a>
      </div>
    </div>
    <div>
      <h4>Product</h4>
      <ul>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Integrations</a></li>
        <li><a href="#">Changelog</a></li>
      </ul>
    </div>
    <div>
      <h4>Resources</h4>
      <ul>
        <li><a href="#">Docs</a></li>
        <li><a href="#">Guides</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Community</a></li>
      </ul>
    </div>
    <div>
      <h4>Company</h4>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div>
      <h4>Legal</h4>
      <ul>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Security</a></li>
        <li><a href="#">Cookies</a></li>
      </ul>
    </div>
  </div>
  <div class="bottom">
    <div>© 2026 Studio. All rights reserved.</div>
    <div>🌎 English (US)</div>
  </div>
</footer>
.cols {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
}

/* Brand column is wider to hold the tagline + socials */

.social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
3. Subscribe Footer — CTA row with newsletter signup + footer links

Stay in the loop

One email a week — new labs, fresh code, no spam.

© 2026 Visual Playground
<footer class="sub-footer">
  <div class="cta-row">
    <div>
      <h2>Stay in the loop</h2>
      <p>One email a week — new labs, fresh code, no spam.</p>
    </div>
    <form class="form" id="subscribe-form">
      <input type="email" required placeholder="your@email.com">
      <button type="submit">Subscribe</button>
    </form>
  </div>
  <div class="bottom">
    <div>© <span class="year">2026</span> Visual Playground</div>
    <ul>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</footer>
.form {
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,.1);
  padding: 6px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.form input {
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 16px;
}

.form button {
  background: #fff;
  border-radius: 999px;
  padding: 10px 20px;
}
// Keep the copyright year fresh forever
document.querySelector('.year').textContent = new Date().getFullYear();

// Handle the newsletter signup without leaving the page
const form = document.getElementById('subscribe-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = form.querySelector('input[type=email]').value;
  // Replace this with your real signup endpoint
  console.log('Subscribing:', email);
  form.innerHTML = '<span style="color:#fff;padding:10px 16px;">Thanks — check your inbox!</span>';
});
4. Social-first — big brand, centered, prominent social buttons
studio.

Thanks for scrolling all the way down. Say hi — we don't bite.

© 2026 Studio · Made with care in Virginia
<footer>
  <div class="brand">studio.</div>
  <p class="tag">Thanks for scrolling all the way down. Say hi — we don't bite.</p>
  <div class="socials">
    <a href="#"><i class="ph-fill ph-twitter-logo"></i></a>
    <a href="#"><i class="ph-fill ph-instagram-logo"></i></a>
    <a href="#"><i class="ph-fill ph-dribbble-logo"></i></a>
    <a href="#"><i class="ph-fill ph-github-logo"></i></a>
    <a href="#"><i class="ph-fill ph-envelope"></i></a>
  </div>
  <div class="copy">© 2026 Studio · Made with care in Virginia</div>
</footer>
.socials a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.socials a:hover {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  transform: translateY(-2px);
}
5. Dark Gradient — layered radial glow with gradient brand wordmark
<footer>
  <div class="main">
    <div>
      <div class="brand"><span>nebula</span>.</div>
      <p class="lead">The design OS for ambitious teams. Start free, ship fast.</p>
    </div>
    <div>
      <h4>Product</h4>
      <ul>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Docs</a></li>
      </ul>
    </div>
    <div>
      <h4>Company</h4>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Press</a></li>
      </ul>
    </div>
    <div>
      <h4>Legal</h4>
      <ul>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Security</a></li>
      </ul>
    </div>
  </div>
  <div class="bottom">© 2026 Nebula Labs · Made with ☕ + pixels</div>
</footer>
/* Layered radials over deep navy */
footer {
  background:
    radial-gradient(circle at 20% 20%, rgba(236,72,153,.2), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,.15), transparent 50%),
    #0b0b14;
}

/* Gradient-filled brand wordmark */
.brand span {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
6. Newsletter — editorial centered feel with underline input

Let's stay in touch.

A monthly letter from our studio — thoughts, favorites, and occasional behind-the-scenes.

© 2026 Studio · Privacy · Terms · Unsubscribe 
<footer class="news-footer">
  <h2>Let's stay in touch.</h2>
  <p>A monthly letter from our studio — thoughts, favorites, and occasional behind-the-scenes.</p>
  <form id="news-form">
    <input type="email" required placeholder="Your email address">
    <button type="submit">Subscribe →</button>
  </form>
  <div class="bottom">
    © <span class="year">2026</span> Studio ·
    <a href="#">Privacy</a> ·
    <a href="#">Terms</a> ·
    <a href="#">Unsubscribe</a>
  </div>
</footer>
/* Underline form — minimal editorial feel */
form {
  display: flex;
  border-bottom: 2px solid #111;
  max-width: 420px;
  margin: 0 auto;
}

form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 4px;
}

form button {
  background: transparent;
  border: none;
  font-weight: 700;
  cursor: pointer;
}
// Auto-update the copyright year so you never edit it again
document.querySelector('.year').textContent = new Date().getFullYear();

// Newsletter signup: intercept submit, show a friendly confirmation
const form = document.getElementById('news-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = form.querySelector('input').value.trim();
  if (!email) return;
  // Swap in your real signup endpoint here (fetch, etc.)
  form.innerHTML = '<span style="font-style:italic;color:#666;">Thanks — see you in your inbox.</span>';
});
7. Compact — single-line inline footer for docs / dashboards
<footer>
  <div>© 2026 Studio · v2.4.1</div>
  <div class="links">
    <a href="#">Docs</a>
    <a href="#">Status</a>
    <a href="#">Changelog</a>
  </div>
  <div class="right"><i class="ph-fill ph-circle" style="color:#22c55e;font-size:10px;"></i> All systems operational</div>
</footer>
footer {
  padding: 16px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1a22;
  color: #cbd5e1;
  font-size: 13px;
}
8 · Full Page

The whole thing as one file

Everything above — the mega-sitemap footer, a subscribe bar, and a back-to-top button — combined into one complete HTML file. Copy it into a new file called index.html, open it in a browser, and it just works. Here's the live result, then the full code.

Live preview

Complete HTML — copy this whole file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Studio Lakewood</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2433; }

    /* ===== Page content (so the footer sits at the bottom of a real page) ===== */
    main { padding: 60px 24px; max-width: 760px; margin: 0 auto; }
    main h1 { font-size: 2rem; margin-bottom: 12px; }
    main p { color: #4b5563; line-height: 1.7; margin-bottom: 14px; }

    /* ===== Subscribe bar ===== */
    .subscribe {
      background: linear-gradient(135deg, #1e1b4b, #312e81); color: #fff;
      padding: 50px 24px; text-align: center;
    }
    .subscribe h2 { font-size: 1.8rem; margin-bottom: 8px; }
    .subscribe p { color: #c7d2fe; font-size: 14px; margin-bottom: 22px; }
    .subscribe form {
      display: flex; gap: 8px; max-width: 440px; margin: 0 auto;
      background: rgba(255,255,255,.1); padding: 6px; border-radius: 999px;
    }
    .subscribe input {
      flex: 1; background: transparent; border: none; outline: none;
      padding: 10px 16px; color: #fff; font: inherit;
    }
    .subscribe input::placeholder { color: #c7d2fe; }
    .subscribe button {
      padding: 10px 20px; border-radius: 999px; background: #fff;
      color: #1e1b4b; font-weight: 700; border: none; cursor: pointer; font-size: 13px;
    }

    /* ===== Mega-sitemap footer ===== */
    .site-footer { background: #0f172a; color: #cbd5e1; padding: 60px 24px 30px; }
    .site-footer .sf-inner {
      max-width: 1100px; margin: 0 auto 40px;
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
    }
    .site-footer .sf-brand h3 { color: #fff; margin-bottom: 8px; font-size: 1.2rem; }
    .site-footer .sf-brand p { color: #64748b; font-size: 14px; max-width: 320px; margin-bottom: 16px; }
    .site-footer .sf-social { display: flex; gap: 10px; }
    .site-footer .sf-social a {
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.05); color: #cbd5e1; text-decoration: none;
      display: flex; align-items: center; justify-content: center; font-size: 13px;
    }
    .site-footer .sf-social a:hover { background: #ec4899; color: #fff; }
    .site-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
    .site-footer .sf-col a { display: block; color: #94a3b8; text-decoration: none; font-size: 14px; margin-bottom: 8px; }
    .site-footer .sf-col a:hover { color: #fff; }
    .site-footer .sf-bottom {
      max-width: 1100px; margin: 0 auto; padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.08);
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
      font-size: 13px; color: #64748b;
    }

    /* ===== Back-to-top button ===== */
    .to-top {
      position: fixed; bottom: 24px; right: 24px;
      width: 44px; height: 44px; border-radius: 50%;
      background: #ec4899; color: #fff; border: none; cursor: pointer;
      font-size: 1.2rem; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.25);
      opacity: 0; pointer-events: none; transition: opacity .25s;
    }
    .to-top.show { opacity: 1; pointer-events: auto; }

    @media (max-width: 700px) {
      .site-footer .sf-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    }
  </style>
</head>
<body>

  <main>
    <h1>Studio Lakewood</h1>
    <p>A design studio for brands who want to stop blending in. Scroll all the way down to see the footer — that's the part this lab is about.</p>
    <p>The subscribe bar, the link columns, and the back-to-top button all live below. Make the window narrow and the footer columns reflow from four down to two.</p>
    <p style="height: 360px;">Plenty of room to scroll…</p>
  </main>

  <section class="subscribe">
    <h2>Stay in the loop</h2>
    <p>One email a week — new work, fresh ideas, no spam.</p>
    <form onsubmit="return false;">
      <input type="email" placeholder="your@email.com" aria-label="Email address">
      <button type="submit">Subscribe</button>
    </form>
  </section>

  <footer class="site-footer">
    <div class="sf-inner">
      <div class="sf-brand">
        <h3>Studio Lakewood</h3>
        <p>A design studio for brands who want to stop blending in.</p>
        <div class="sf-social">
          <a href="#" aria-label="Twitter">Tw</a>
          <a href="#" aria-label="Instagram">Ig</a>
          <a href="#" aria-label="LinkedIn">In</a>
        </div>
      </div>
      <div class="sf-col">
        <h4>Product</h4>
        <a href="#">Features</a>
        <a href="#">Pricing</a>
        <a href="#">Integrations</a>
      </div>
      <div class="sf-col">
        <h4>Company</h4>
        <a href="#">About</a>
        <a href="#">Careers</a>
        <a href="#">Contact</a>
      </div>
      <div class="sf-col">
        <h4>Legal</h4>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
      </div>
    </div>
    <div class="sf-bottom">
      <span>&copy; 2026 Studio Lakewood. All rights reserved.</span>
      <span>Made with care in Virginia</span>
    </div>
  </footer>

  <button class="to-top" aria-label="Back to top">&#8593;</button>

  <script>
    var toTop = document.querySelector('.to-top');
    window.addEventListener('scroll', function () {
      if (window.scrollY > 200) toTop.classList.add('show');
      else toTop.classList.remove('show');
    });
    toTop.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>
Copy & Paste

A complete, working footer

The variant previews above are trimmed to show one idea at a time — that's why pasting them whole won't work. This block is the whole thing: paste the HTML near the bottom of your <body> and the CSS into your stylesheet, and you get a responsive footer with link columns and a copyright bar. No libraries needed.

1. HTML — paste near the bottom of your <body>

<footer class="site-footer">
  <div class="sf-inner">
    <div class="sf-brand">
      <h3>Studio Lakewood</h3>
      <p>A design studio for brands who want to stop blending in.</p>
    </div>
    <div class="sf-col">
      <h4>Product</h4>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Integrations</a>
    </div>
    <div class="sf-col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Contact</a>
    </div>
    <div class="sf-col">
      <h4>Legal</h4>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
    </div>
  </div>
  <div class="sf-bottom">
    <span>© 2026 Studio Lakewood. All rights reserved.</span>
    <span class="sf-social">
      <a href="#">Twitter</a>
      <a href="#">Instagram</a>
      <a href="#">LinkedIn</a>
    </span>
  </div>
</footer>

2. CSS — paste into your stylesheet

<style>
.site-footer { background: #0f172a; color: #cbd5e1; padding: 56px 24px 24px; }
.site-footer .sf-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
.site-footer .sf-brand h3 { color: #fff; margin: 0 0 8px; font-size: 1.2rem; }
.site-footer .sf-brand p { color: #64748b; font-size: 14px; max-width: 320px; margin: 0; }
.site-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; }
.site-footer .sf-col a { display: block; color: #94a3b8; text-decoration: none; font-size: 14px; margin-bottom: 8px; }
.site-footer .sf-col a:hover { color: #fff; }
.site-footer .sf-bottom {
  max-width: 1100px; margin: 36px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: #64748b;
}
.site-footer .sf-social a { color: #94a3b8; text-decoration: none; margin-left: 18px; }
.site-footer .sf-social a:hover { color: #fff; }

@media (max-width: 700px) {
  .site-footer .sf-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer .sf-bottom { flex-direction: column; }
  .site-footer .sf-social a { margin: 0 18px 0 0; }
}
</style>