Free tool · 3 starter templates

HTML footer generator

A small finishing touch for your next launch. Choose a template, make it yours, and copy the responsive HTML and CSS.

TemplateBrand nameWebsite URL

Small style modsDark backgroundRounded corners

Your footer, ready for a first look.

Your footer code

<style>
  .of-footer { box-sizing: border-box; background: #172033; color: #f8fafc; padding: 32px; border-radius: 24px; font: 16px/1.6 system-ui, sans-serif; }
  .of-footer .of-inner { max-width: 1120px; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
  .of-footer a { color: inherit; text-underline-offset: 4px; }
  .of-footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .of-footer .of-brand { font-weight: 700; font-size: 20px; }
  .of-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
  .of-footer .of-note { flex-basis: 100%; margin: 0; font-size: 14px; }
</style>
<footer class="of-footer">
  <div class="of-inner">
    <a class="of-brand" href="https://example.com/">Your company</a>
    <nav aria-label="Footer navigation">
      <a href="https://example.com/#features">Features</a>
      <a href="https://example.com/#pricing">Pricing</a>
      <a href="https://example.com/contact">Contact</a>
      <a href="https://example.com/privacy-policy">Privacy</a>
    </nav>
    <p class="of-note">&copy; 2026 Your company. All rights reserved.</p>
  </div>
</footer>

Managing more than one site? Keep future changes in one place.

Manage my sites with 1Footer →

This standalone template is copied manually. Creating an account does not import this design.

How to use your template

Copy the output into your page before the closing body tag. Check every link and replace the example paths with real destinations before publishing. The Privacy link is a placeholder for your own policy.

The templates use ordinary HTML links, a labeled navigation region, wrapping layouts, and visible keyboard focus. Test the result in your site’s layout and on mobile. If your site blocks inline styles, move the CSS into your stylesheet.