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.