Gradient Background Footer Template

Add a vibrant, modern touch to your website with this eye-catching gradient background footer.

This template uses a smooth CSS gradient to create a memorable and energetic design. It features a clean, centered layout for your logo, links, and social icons, making it perfect for brands that want to stand out from the crowd.

Screenshot of a footer with a colorful blue-to-purple gradient background and white text.

Get Source Code Preview

About this Gradient Footer Template

Gradients are a popular trend in modern web design, and this footer makes it easy to incorporate that style into your project. The template is built around a beautiful, bold CSS gradient that serves as the background. All the footer content (logo, navigation, social icons, and copyright) is styled in a high-contrast color (white) to ensure readability. The layout is simple, centered, and fully responsive.

Features

Vibrant Gradient Background: Uses a CSS linear-gradient() for a smooth, colorful effect.
Easily Customizable: The gradient colors can be changed with a single line of CSS by modifying the color values in the --footer-gradient variable.
Clean, Centered Layout: All elements are center-aligned, creating a balanced and modern look that works on all screen sizes.
High-Contrast Text: Ensures all text and icons are easy to read against the colorful background.
Responsive by Default: The centered, stacked layout is inherently responsive and requires no complex media queries.

Ideal Use Cases

Tech startups and app websites.
Creative agencies and design portfolios.
Marketing or event landing pages.
Any brand with a bold, modern, and energetic identity.

Code Breakdown

The core of this template is a single CSS property applied to the .footer-gradient element: background: var(--footer-gradient). The --footer-gradient variable holds a linear-gradient() function. By changing the color stops in this variable, you can create any gradient you want.

The layout uses Flexbox (display: flex, flex-direction: column, and align-items: center) to stack and center all the child elements vertically. This creates a simple, robust, and naturally responsive structure.

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>Gradient Background Footer</title>
    <style>
        :root {
            --footer-gradient: linear-gradient(90deg, #4e54c8, #8f94fb);
            --footer-text-color: #ffffff;
            --footer-link-hover-opacity: 0.8;
            --footer-copyright-color: rgba(255, 255, 255, 0.7);
        }

/* 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-gradient {
            background: var(--footer-gradient);
            color: var(--footer-text-color);
            padding: 3rem 1.5rem;
            text-align: center;
        }

.footer-gradient__container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }
        
        .footer-gradient__logo {
            width: 130px;
        }
        .footer-gradient__logo path {
            fill: var(--footer-text-color);
        }

.footer-gradient__nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
        }
        
        .footer-gradient__nav a {
            color: var(--footer-text-color);
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.2s;
        }
        .footer-gradient__nav a:hover {
            opacity: var(--footer-link-hover-opacity);
        }
        
        .footer-gradient__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }

.footer-gradient__social a {
            color: var(--footer-text-color);
            transition: opacity 0.2s;
        }
        .footer-gradient__social a:hover {
            opacity: var(--footer-link-hover-opacity);
        }
        .footer-gradient__social svg {
            width: 22px;
            height: 22px;
            fill: currentColor;
        }
        
        .footer-gradient__copyright {
            font-size: 0.875rem;
            color: var(--footer-copyright-color);
        }

</style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Gradient Background Footer</h1>
            <p>A vibrant footer to add a pop of color to your design.</p>
        </div>
    </main>

<footer class="footer-gradient" role="contentinfo">
        <div class="container footer-gradient__container">
            <a href="#" class="footer-gradient__logo" aria-label="Homepage">
                <svg viewBox="0 0 105 30" xmlns="http://www.w3.org/2000/svg">
                    <title>Brand Logo</title>
                    <path d="M0 30L15 0L30 30L22.5 30L15 15L7.5 30H0Z M30 30V0H45V12H60V0H75V30H60V18H45V30H30Z M90 30L105 0L97.5 0L90 15L82.5 0L75 0L90 30Z"/>
                </svg>
            </a>
            
            <nav class="footer-gradient__nav" aria-label="Footer Navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

<nav class="footer-gradient__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 Instagram Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.784.297-1.459.717-2.126 1.384S.926 3.356.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.297.784.717 1.459 1.384 2.126.667.666 1.342 1.089 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.784-.297 1.459-.718 2.126-1.384.666-.667 1.089-1.342 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.148-.558-2.913-.297-.784-.718-1.459-1.384-2.126C21.314 1.64 20.64 1.217 19.856.92c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.056 1.17-.249 1.805-.413 2.227-.217.562-.477.96-.896 1.382-.42.419-.819.679-1.381.896-.422-.164-1.057.36-2.227.413-1.266.057-1.646.07-4.85.07s-3.585-.015-4.85-.074c-1.17-.056-1.805-.249-2.227-.413-.562-.217-.96-.477-1.382-.896-.419-.42-.679-.819-.896-1.381-.164-.422-.36-1.057-.413-2.227-.057-1.266-.07-1.646-.07-4.85s.015-3.585.074-4.85c.056-1.17.249-1.805.413-2.227.217.562.477.96.896-1.382.42-.419.819.679 1.381-.896.422-.164 1.057.36 2.227-.413 1.266-.057 1.646-.07 4.85-.07zM12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z"/></svg></a></li>
                </ul>
            </nav>

View Output