Gradient Background Footer

<!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>