Dark Mode Footer Template

Give your website a sleek, contemporary finish with this versatile dark mode footer.

Dark mode footers are a timeless choice, offering excellent contrast and a premium feel. This template provides a classic multi-column layout that is perfect for organizing links for corporate sites, portfolios, and blogs.

Screenshot of a sleek footer with a dark background, light text, and multiple columns for navigation.

Get Source Code Preview

About this Dark Mode Footer Template

This template uses a classic dark theme to create a visually distinct and easy-to-read footer. The layout is a standard four-column grid, providing ample space for sitemap links, contact information, and a brief company mission statement. A clean sub-footer houses the copyright notice and social media links, creating a well-organized and professional structure.

Features

Sleek Dark Theme: High-contrast light text on a dark background is easy on the eyes and looks professional.
Multi-Column Layout: A four-column CSS Grid provides structured organization for all your essential links.
Responsive Design: The columns stack neatly into a single, readable column on mobile devices.
SVG Logo & Icons: Includes a placeholder SVG logo and social icons, all styled with CSS to be perfectly visible against the dark background.
Aligned Page Layout: Uses a shared .container class to ensure the footer's content aligns perfectly with the main page content.

Ideal Use Cases

SaaS and Technology Websites
Creative Agencies and Portfolios
Modern Corporate Sites
Blogs with a contemporary design.

Code Breakdown

The main footer area, .footer-dark__main, is a CSS Grid container. It displays as a single column on mobile and transitions to a two-column, then four-column, layout on wider screens using media queries. The final section, .footer-dark__bottom, uses Flexbox to align the copyright text and social links on opposite sides of the screen (on larger devices).

The colors for the text, headings, and links are all controlled via CSS variables at the top of the stylesheet, making it simple to theme the footer to match your brand.

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Footer</title>
    <style>
        :root {
            --footer-bg: #121212;
            --footer-text: #a0a0a0;
            --footer-heading: #ffffff;
            --footer-link-hover: #ffffff;
            --footer-border: #2a2a2a;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex-grow: 1;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-dark {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding-top: 3rem;
            font-size: 0.9rem;
            line-height: 1.6;
        }

.footer-dark__main-grid {
            display: grid;
            grid-template-columns: 1fr; /* Mobile-first */
            gap: 2.5rem;
            padding-bottom: 2.5rem;
        }

.footer-dark__brand .logo {
            width: 120px;
            margin-bottom: 1rem;
        }
        .footer-dark__brand .logo path {
            fill: var(--footer-heading);
        }

.footer-dark__heading {
            color: var(--footer-heading);
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 1rem 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .footer-dark__links ul { margin: 0; padding: 0; list-style: none; }
        .footer-dark__links li:not(:last-child) { margin-bottom: 0.75rem; }
        .footer-dark__links a { color: var(--footer-text); text-decoration: none; transition: color 0.2s; }
        .footer-dark__links a:hover { color: var(--footer-link-hover); }

.footer-dark__bottom {
            border-top: 1px solid var(--footer-border);
            padding: 1.5rem 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }

.footer-dark__copyright {
            margin: 0;
            text-align: center;
            font-size: 0.875em;
        }
        
        .footer-dark__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }
        .footer-dark__social a { color: var(--footer-text); transition: color 0.2s; }
        .footer-dark__social a:hover { color: var(--footer-link-hover); }
        .footer-dark__social svg { width: 20px; height: 20px; fill: currentColor; }

@media (min-width: 600px) {
            .footer-dark__main-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 992px) {
            .footer-dark__main-grid {
                grid-template-columns: 1.5fr 1fr 1fr 1fr;
            }
            .footer-dark__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Dark Mode Footer</h1>
            <p>A sleek and modern footer style.</p>
        </div>
    </main>

<footer class="footer-dark" role="contentinfo">
        <div class="container">
            <div class="footer-dark__main-grid">
                <div class="footer-dark__brand">
                    <a href="#" aria-label="Homepage">
                        <svg class="logo" viewBox="0 0 100 25" xmlns="http://www.w3.org/2000/svg"><title>Your Brand</title><path d="M0 0 H25 V25 H0 Z M30 0 H55 V25 H30 Z M60 0 H100 V10 H60Z M60 15 H100 V25 H60Z"/></svg>
                    </a>
                    <p>A sleek and modern footer for businesses that want to make a bold statement.</p>
                </div>
                <div class="footer-dark__links">
                    <h3 class="footer-dark__heading">Product</h3>
                    <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Case Studies</a></li>
                        <li><a href="#">Reviews</a></li>
                    </ul>
                </div>
                <div class="footer-dark__links">
                    <h3 class="footer-dark__heading">Resources</h3>
                    <ul>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Status</a></li>
                    </ul>
                </div>
                <div class="footer-dark__links">
                    <h3 class="footer-dark__heading">Company</h3>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Press</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-dark__bottom">
                <p class="footer-dark__copyright">&copy; 2025 Your Brand. All Rights Reserved.</p>
                <nav class="footer-dark__social" aria-label="Social media">
                    <ul>
                        <li><a href="#" aria-label="Our Twitter Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.223.085 4.93 4.93 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a></li>
                        <li><a href="#" aria-label="Our GitHub Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a></li>
                        <li><a href="#" aria-label="Our LinkedIn Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </footer>
</body>
</html>

View Output