SVG Wave Divider Footer Template

Break away from straight lines with this elegant footer featuring a custom SVG wave divider.

This template adds a touch of custom design flair by using a smooth, scalable SVG wave to separate your footer from the main content. It's a modern technique that looks great on creative sites, portfolios, and SaaS landing pages.

Screenshot of a footer with a dark background that is separated from the white page content by a smooth, curved wave shape.

Get Source Code Preview

About this SVG Divider Footer Template

Standard horizontal lines can be boring. This footer template elevates a simple dark mode design by introducing a custom shape divider. The effect is achieved by layering an inline svg element just before the footer, creating a dynamic, flowing transition. The footer itself contains a classic and functional multi-column layout for navigation and contact links.

Features

Custom Shape Divider: An elegant SVG wave creates a unique visual transition.
Scalable & Responsive: The SVG is fully responsive and looks crisp on all screen sizes, from mobile to high-resolution desktops.
Easy to Customize: The wave's shape and color are controlled directly within the SVG code and CSS, allowing for easy modification.
Classic Dark Mode Layout: A functional and familiar four-column grid organizes footer content effectively.
Layered Design: The illusion of the wave "cutting into" the page content is achieved by using a negative top margin on the footer.

Ideal Use Cases

SaaS and App Landing Pages
Creative and Design Agencies
Modern portfolios and blogs.
Any website wanting to add a custom, high-end design touch.

Code Breakdown

This effect relies on two key elements: the .footer-divider div containing the inline svg, and the main .footer-wave element. The SVG is set to display: block and its fill color is set in the CSS to match the footer's background color.

To create the overlapping effect, the footer itself is given a negative margin-top value. This pulls the footer up, making it appear as though the SVG wave is part of the footer and is carving into the section above it. This technique avoids complex positioning and keeps the document flow intact.

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>SVG Wave Divider Footer</title>
    <style>
        :root {
            --footer-bg: #222529;
            --footer-text: #adb5bd;
            --footer-heading: #ffffff;
            --footer-link-hover: #ffffff;
            --footer-border: #3b3f44;
        }

/* 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;
            background-color: #ffffff; /* Page content needs a background */
        }
        
        .main-content-wrapper {
             background-color: #ffffff; /* Set this to your main page background color */
        }

/* FOOTER STYLES START HERE */
        
        /* The SVG divider itself */
        .footer-divider {
            line-height: 0; /* Removes any extra space around the SVG */
            background-color: #ffffff; /* Match the content background above it */
        }
        .footer-divider svg {
            display: block;
            width: 100%;
            height: 80px; /* Adjust height of the wave */
            fill: var(--footer-bg);
        }

.footer-wave {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 2rem 0 3rem 0;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-top: -1px; /* Overlap slightly to prevent rendering gaps */
        }
        
        .footer-wave__main-grid {
            display: grid;
            grid-template-columns: 1fr; /* Mobile-first */
            gap: 2.5rem;
        }

.footer-wave__heading {
            color: var(--footer-heading);
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 1rem 0;
        }
        
        .footer-wave__links ul { margin: 0; padding: 0; list-style: none; }
        .footer-wave__links li:not(:last-child) { margin-bottom: 0.75rem; }
        .footer-wave__links a { color: var(--footer-text); text-decoration: none; transition: color 0.2s; }
        .footer-wave__links a:hover { color: var(--footer-link-hover); }

.footer-wave__bottom {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--footer-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            text-align: center;
        }
        .footer-wave__copyright { font-size: 0.875em; }

@media (min-width: 600px) {
            .footer-wave__main-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 992px) {
            .footer-wave__main-grid {
                grid-template-columns: 1.5fr 1fr 1fr 1fr;
            }
            .footer-wave__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main class="main-content-wrapper">
        <div class="container main-content">
            <h1>SVG Wave Divider Footer</h1>
            <p>This template uses an SVG to create a custom shape divider.</p>
        </div>
    </main>

<div class="footer-divider" aria-hidden="true">
        <svg viewBox="0 0 1440 100" preserveAspectRatio="none">
            <path d="M0,50 C240,90 480,10 720,50 C960,90 1200,10 1440,50 V100 H0 Z"></path>
        </svg>
    </div>

<footer class="footer-wave" role="contentinfo">
        <div class="container">
            <div class="footer-wave__main-grid">
                <div class="footer-wave__about">
                    <h3 class="footer-wave__heading">About Us</h3>
                    <p>We create beautiful, modern web templates to help your projects stand out. This wave is just the beginning.</p>
                </div>
                <div class="footer-wave__links">
                    <h3 class="footer-wave__heading">Navigate</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-wave__links">
                    <h3 class="footer-wave__heading">Resources</h3>
                    <ul>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Support</a></li>
                    </ul>
                </div>
                 <div class="footer-wave__links">
                    <h3 class="footer-wave__heading">Legal</h3>
                    <ul>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Service</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-wave__bottom">
                <p class="footer-wave__copyright">&copy; 2025 Your Brand. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

View Output