SaaS & Tech Company Footer Template

A professional and informative footer designed to serve the needs of a modern SaaS or technology company.

This template is designed to serve multiple audiences at once including prospective customers, existing users, developers and potential hires. It provides clear pathways to product features, developer documentation, company information, and app downloads.

Screenshot of a SaaS and tech company footer showing distinct columns for Product, Developers, and Company, with badge-style app download buttons below.

Get Source Code Preview

About this SaaS Footer Template

The footer on a tech company's website will often act as a comprehensive information hub. This template uses a clean, multi-column grid to organize links logically into categories like "Product," "Developers," and "Company." A dedicated section with clear, badge-style buttons provides a trusted call-to-action for app downloads.

Features

Audience-Specific Columns: Organizes links for different user types, such as "API Documentation" for developers and "Pricing" for customers.
Badge-Style App Buttons: Includes self-contained SVG placeholder badges for app downloads. These can easily be swapped out for relevant badges/buttons as required.
Clean & Modern Design: A professional, dark-mode aesthetic common in the tech industry.
Responsive Grid Layout: The CSS Grid layout transitions smoothly from stacked columns on mobile to a multi-column view on desktops.
Aligned Page Layout: The template includes a shared .container class to ensure the footer content aligns perfectly with your main page content.

Ideal Use Cases

SaaS (Software as a Service) Products
Mobile App Websites
Software Development Companies
Tech Startups and API providers.

Code Breakdown

The layout is structured with a shared s.container class on both the main content and the footer to ensure proper alignment. The footer itself is split into two parts: .footer-saas__main for the link columns, and .footer-saas__bottom for the legal text and app badges.

The placeholder app badges are implemented as self-contained svg elements. This approach requires no external files. The background and text colors are controlled by the --app-badge-bg and --app-badge-text CSS variables, making them easy to customize. As mentioned, these can be swapped out as required.

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>SaaS & Tech Company Footer</title>
    <style>
        :root {
            --footer-bg: #1d1d1f;
            --footer-text: #a1a1a6;
            --footer-heading: #f5f5f7;
            --footer-link-hover: #ffffff;
            --footer-border: #3a3a3c;
            --app-badge-bg: #000000;
            --app-badge-text: #ffffff;
        }

/* Basic body styles */
        body {
            font-family: system-ui, -apple-system, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #ffffff;
            color: #1d1d1f;
        }
        
        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-saas {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            font-size: 0.9rem;
            padding: 3rem 0;
        }

.footer-saas__main {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem 1.5rem;
            padding-bottom: 2.5rem;
            border-bottom: 1px solid var(--footer-border);
        }

.footer-saas__heading {
            font-weight: 600;
            color: var(--footer-heading);
            margin: 0 0 1rem 0;
            font-size: 1rem;
        }

.footer-saas__links ul { margin: 0; padding: 0; list-style: none; }
        .footer-saas__links li:not(:last-child) { margin-bottom: 0.75rem; }
        .footer-saas__links a { color: var(--footer-text); text-decoration: none; transition: color 0.2s ease; }
        .footer-saas__links a:hover { color: var(--footer-link-hover); }

.footer-saas__bottom {
            padding-top: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }
        
        .footer-saas__copyright {
            margin: 0;
            font-size: 0.875rem;
            text-align: center;
        }

.footer-saas__app-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

.footer-saas__app-badges a {
            display: inline-block;
            transition: opacity 0.2s ease;
        }
        .footer-saas__app-badges a:hover {
            opacity: 0.85;
        }
        .footer-saas__app-badges svg {
            height: 40px;
            width: auto;
        }
        
        /* Media query for larger screens */
        @media (min-width: 768px) {
            .footer-saas__main {
                grid-template-columns: repeat(4, 1fr);
            }
            .footer-saas__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>SaaS & Tech Company Footer</h1>
            <p>This template is ideal for software products and tech startups.</p>
        </div>
    </main>

<footer class="footer-saas" role="contentinfo">
        <div class="container">
            <div class="footer-saas__main">
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Product</h3>
                    <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Integrations</a></li>
                        <li><a href="#">Changelog</a></li>
                        <li><a href="#">Security</a></li>
                    </ul>
                </div>
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Developers</h3>
                    <ul>
                        <li><a href="#">API Documentation</a></li>
                        <li><a href="#">SDKs</a></li>
                        <li><a href="#">API Status</a></li>
                        <li><a href="#">Open Source</a></li>
                    </ul>
                </div>
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Resources</h3>
                    <ul>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Case Studies</a></li>
                        <li><a href="#">Webinars</a></li>
                        <li><a href="#">Community</a></li>
                    </ul>
                </div>
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Company</h3>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Brand Assets</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-saas__bottom">
                <p class="footer-saas__copyright">&copy; 2025 TechCorp Inc.</p>
                <div class="footer-saas__app-badges">
                    <a href="#" aria-label="Download on the App Store">
                        <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                            <rect width="135" height="40" rx="8" fill="var(--app-badge-bg)"/>
                            <g fill="var(--app-badge-text)">
                                
                                <circle cx="24" cy="20" r="10" />
                                <text x="45" y="17" font-size="10">Download on the</text>
                                <text x="45" y="33" font-size="14" font-weight="bold">App Store</text>
                            </g>
                        </svg>
                    </a>
                    <a href="#" aria-label="Get it on Google Play">
                        <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                            <rect width="135" height="40" rx="8" fill="var(--app-badge-bg)"/>
                            <g fill="var(--app-badge-text)">
                                
                                <polygon points="18,10 34,20 18,30"/>
                                <text x="45" y="17" font-size="10">GET IT ON</text>
                                <text x="45" y="33" font-size="14" font-weight="bold">Google Play</text>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

View Output