Skip to content

Big Brand Footer

A copy-paste footers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

FootersHTMLCSSany framework

Copy into your project

HTML
<footer class="nuda-footer-brand">
  <div class="nuda-footer-brand__title">NUDA<span>UI</span></div>
  <div class="nuda-footer-brand__meta">
    <span>© 2025</span>
    <span>·</span>
    <a href="#">Privacy</a>
    <span>·</span>
    <a href="#">Terms</a>
  </div>
</footer>
CSS
.nuda-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
}

.nuda-footer-brand__title {
  font-size: clamp(56px, 12vw, 96px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fafafa;
  background: linear-gradient(180deg, #fafafa 0%, #fafafa 60%, transparent 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nuda-brand-slide 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nuda-footer-brand__title span {
  color: #e4ff54;
  -webkit-text-fill-color: #e4ff54;
}

.nuda-footer-brand__meta {
  display: flex;
  gap: 8px;
  color: #63636e;
  font-size: 12px;
  margin-top: 8px;
}

@keyframes nuda-brand-slide {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

How to use Big Brand Footer

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More footers components

← Browse all NudaUI components