Footer Lab · Visual Playground

1. Minimal — single row, copyright + links

<footer>
  <div>© 2026 Studio Lakewood</div>
  <div class="links">
    <a href="#">Privacy</a>
    <a href="#">Terms</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>
      <p>Tagline</p>
      <div class="social"><a>...</a></div>
    </div>
    <div><h4>Product</h4><ul>...</ul></div>
    <!-- more columns -->
  </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

<footer>
  <div class="cta-row">
    <div><h2>Stay in the loop</h2></div>
    <form class="form">
      <input type="email">
      <button>Subscribe</button>
    </form>
  </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;
}

4. Social-first — big brand, centered, prominent social buttons

<footer>
  <div class="brand">studio.</div>
  <p>Tagline</p>
  <div class="socials">
    <a><i class="ph-fill ph-twitter-logo"></i></a>
  </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 class="brand"><span>nebula</span>.</div>
    <!-- link columns -->
  </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

<footer>
  <h2>Let's stay in touch.</h2>
  <form>
    <input type="email">
    <button>Subscribe →</button>
  </form>
</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;
}

7. Compact — single-line inline footer for docs / dashboards

<footer>
  <div>© 2026 · v2.4.1</div>
  <div class="links"><a>Docs</a><a>Status</a></div>
  <div>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;
}