OneTaskBy Tim King · Updated
Footer Generator
Responsive Website Footer in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Footer Generator works
This footer generator builds the block at the bottom of every page: your brand and tagline, columns of links and a copyright line. Type the columns as simple lines, pick the colours, and copy responsive HTML and CSS with no framework and no script.
A good footer is where visitors go when they cannot find something in the main menu, so it usually holds the links that matter but do not fit up top: company pages, legal pages and help.
How the footer generator lays out columns
The link columns sit in a CSS grid using repeat(auto-fit, minmax(9rem, 1fr)). On a wide screen
every column fits on one row, and as the screen narrows the grid wraps columns onto new rows by
itself, with no media queries needed. On a phone every block stacks into a single column.
Markup
The whole block is a <footer> element, which screen readers announce as the page's content info.
Each column is a <nav> with its own label and a list of links, so assistive technology can jump
straight to it. The copyright line is a plain paragraph.
FAQ
What should go in a website footer?
Common items are links to about, contact, careers and blog pages, legal pages like privacy and terms, help or support links, and a copyright line. Many sites also add social links and a newsletter sign-up.
How do I add the current year automatically?
Put the year in a <span id="year"> and set it with one line of script,
year.textContent = new Date().getFullYear(). Or update the text once a year when you publish.
Why are the column headings h2 elements?
The footer sits outside the main article, so its headings start a new section at the top level of the page outline. If your page structure needs a different level, change the tag in the HTML; the CSS targets the footer, not the level.
How do I make the footer stick to the bottom of short pages?
Make the body a flex column with min-height: 100vh, then give the main content flex: 1. The
main area grows to fill spare space, which pushes the footer down to the bottom of the window.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Mobile Menu
Build a responsive hamburger menu with an animated icon and panel.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Sticky Header
Build a sticky header that hides, shrinks or stays as the page scrolls.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Back To Top Button
Build a scroll to top button with an optional reading progress ring.