15 Beautiful Website Footers [Examples]
If you are looking for footers for your website you are in the right place.
In this article, we have included a curated list with some of the best footer examples out there. From plain and simple ones made with pure HTML and CSS, to more complex ones using some fancy animations.
What is a website footer?
A website footer is the element on the very bottom of a webpage. Usually containing useful and quickly accessible information for the visitors, such as contact information, privacy policies, newsletter sign-up, or links for help.
Because there's not a single type of footer, there's no way to describe what a footer looks like. The design for footers is different from one website to another.
Generally speaking, many of them contain multiple columns with links, as that's what most visitors would expect the footer to look like.
15 Amazing Footer Design Examples
1. Simple footer website
Here's an example of one of the most common footers for websites.
A simple - yet beautiful - footer made of 4 columns containing basic information and social sharing buttons.
In this case, each column contains a title with an original underline, but you can customize this to your needs.
2. Animated Footer Design
This beautiful website footer will for sure catch your visitor's attention.
The footer is made of animated waves that move horizontally creating that water feeling.
You can speed up or down the footer animation by adjusting the
transition property directly on the CSS code on the
3. Levis website footer design
This footer design uses an image with the company brand on the left side corner making it ideal for those who want to display their logo too.
It contains everything a good website footer should have. A logo, links, social network links, and contact information.
It also contains copyright at the bottom of the footer. Fully responsive.
4. Minimalist CSS website design footer
Here's a super simple and beautiful footer.
It uses a white background and keeps its minimalistic look by removing all the unnecessary. There are no underlines, no colors, no images...
The footer uses flat fonts for social media icons and payment options. It's divided into 3 columns and contains useful links, a newsletter form to subscribe to, and a few icons.
It's fully responsive.
5. Simple website footer example
This footer is a great example of how to keep things simple.
The footer itself won't take much space on the page and it contains the bare minimum. Some links, social buttons, and a copyright notice. It's a simple footer, but a practical one.
Of course, you can always modify the colors on it, so you can apply it to practically any website and it will still look natural to visitors.
6. An engaging footer example
A great footer design for websites that like to keep things simple and clean.
The footer is made up of 4 columns. It makes good use of whitespace and it contains a newsletter subscription form.
I love how modern and clean it looks to the eye. Fully responsive too!
7. Footer With Gallery Slider
Here's a less traditional footer for your website.
What makes this footer stand out from the rest is the fact that it contains an animated slider with a gallery of Instagram images.
The footer also displays social media icons and simple copyright notices at the very bottom.
Ideal for photographers, designers, and anyone who wants to showcase their work at the very bottom of their website.
8. Wavey Footer For Websites
This animated footer design is for those who want to stand out from the crowd.
It contains a colored canva animation mimicking the movement of waves.
This footer is making use of the Twgl library to get this effect.
If you are familiar with canva you can try modifying the code to your needs, and if not, make sure to check our tutorial introduction to canva!
9. Website Copyright Footer Example
If all you want on your website is a footer with a copyright notice, then this is the ideal footer for you.
It's just that. A copyright message with a background color. Nothing more, nothing less.
10. Big Website Footer
If you are those who like big things or that want to add as many things as possible in a footer, then this footer is for you.
This is a 2 rows footer that will allow you to add everything you need to it. Address, phone number, email, logo, description, useful links, social buttons, newsletter subscription, and copyright notice.
All in one big and responsive footer.
11. CSS Footer Template With Animations
Here's a truly amazing footer for any website.
It contains a picture of a city at the very bottom and a couple of animations that are what make this footer something so original.
This footer template can be customized by just playing with the CSS and the HTML code. Things like the animated GIF images, their transition times, and the colors can all be changed to your needs.
Besides all this, the combination of colors looks great and the footer contains everything you would expect.
12. Black and white footer design
Here's a footer design for those who like to keep things simple.
It's a 4 columns footer that, despite looking plane, it looks quite modern.
I like the fact that it only uses 2 main colors and that it allows you to attach a logo to it.
Warning: not responsive!
13. Tailwind CSS footer
This footer is made using Tailwind CSS framework.
It's a good example of how to add some touch of color to a white background website.
I like the rounded corners and the simplicity of it all.
Ideal for those who want to add a newsletter form in their footer.
14. Brutalism Footer Design
If you are the kind of person who likes breaking the norms or just playing risky with designs, this footer might be for you.
This example of a footer is not common. It's a big footer made of 2 huge and responsive columns.
The one on the left contains the subscription form and the links of interest, and the one on the right contains some text describing the company. It also contains social buttons on the right side.
Not for all tastes!
15. White and blue footer example
This footer example shows a less common structure.
It's made of 3 columns and one of them with 2 rows on it. It also contains a contact form that can be super handy for some use cases.
Warning: this footer is NOT responsive.
What to put on the website footer?
Usually, footers contain the following elements:
Links of interest. Anything that might be relevant to your visitors. For example: contact us, about us, help center, our products, etc.
Copyright notice. if the content is copyrighted the footer is usually the best place to state this. That's what people will tend to look for when trying to find out about copyrighted content.
Newsletter form. If your site has any kind of newsletter, adding the sign-up on the footer is another way to make it easier for visitors to find out about it.
Social Media Icons. It's common to add links to social networks on the footer (Facebook, Twitter, Tiktok, Instagram...). It can be done via icons or directly with text links.
Contact information. when visitors want to find something about the company or author of a website, they'll very likely scroll down to the footer. Having any kind of contact information is a must. It can be email, phone number, the good old fax, or just the address.
Address. Sometimes included next to the contact information, adding the address in the footer is a very common practice as well.
Logo. Adding a logo to the footer can be a great way to add a bit of color or to emphasize your brand's design.
Help links. Anything that can help your visitors should be present in the footer. Links to help centers, FAQs or support are expected to be found in the footer of a website.
Sitemap. If visitors want to have a quick look at the structure or content of a website, having sitemaps is a great way to do so. On top of that, they'll be good for the SEO of a website too!
What is a website footer used for?
The website footer is used to display basic information about the company or website. It improves the user experience by making it easier for visitors to find specific things on the page, such as contact information, copyright, help links, social media, or newsletter forms.
Footers typically use a simple design and tend to look very similar to web pages.
The reason for this is to try to make things as easier as possible for the visitors to find the information they are looking for.
The footer is an essential part of any website. A website without a footer is like a person without shoes.
There are plenty of footer designs out there. Each of them with its unique style and features.
In the list of footer examples above we've included different kinds of footers so you can have an idea of what's out there. Now, is up to you to choose the one you like the most and use it on your page.
- 10+ CSS Hamburger Menu [CodePens]
- 20 HTML & CSS Tabs [CodePens]
- Great CSS calendars for your website
- Examples of CSS rounded buttons
Join 2,000+ readers and learn something new every month!