→ Mert Yılmaz
→ Animated Footer with Gradient Effects

Animated Footer with Gradient Effects

A beautifully designed animated footer featuring smooth transitions, gradient effects, and responsive layout for modern websites.

This Example is contributed by Mert Yılmaz, on 19-Mar-2025. It is responsive. similar terms for this example is Email campaign

Gradient Newsletter Animated Wave

Author Mert Yılmaz

Fork Fullscreen

<footer class="footer-container">
  <div class="waves">
    <div class="wave" id="wave1"></div>
    <div class="wave" id="wave2"></div>
    <div class="wave" id="wave3"></div>
    <div class="wave" id="wave4"></div>
  </div>
  <div class="footer-content">
    <div class="footer-section about">
      <h2>About Us</h2>
      <p>We are dedicated to providing exceptional services and innovative solutions to meet your needs. Our team of experts is committed to excellence in everything we do.</p>
      <div class="contact">
        <span><i class="fas fa-map-marker-alt"></i> 123 Street, City, Country</span>
        <span><i class="fas fa-phone"></i> +1 234 567 8900</span>
        <span><i class="fas fa-envelope"></i> info@example.com</span>
      </div>
    </div>
    <div class="footer-section links">
      <h2>Quick Links</h2>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="footer-section newsletter">
      <h2>Subscribe</h2>
      <p>Stay updated with our latest news and offers by subscribing to our newsletter.</p>
      <form action="#" method="post">
        <input type="email" name="email" placeholder="Enter your email">
        <button type="submit" class="btn">Subscribe</button>
      </form>
    </div>
  </div>
  <div class="social-icons">
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2023 Your Company. All Rights Reserved.</p>
  </div>
</footer>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Related Examples

Website Footer with Rich Background Design

Author:
Anonymous

3 weeks ago
Responsive Footer with Social Media Links
A fully responsive footer design that adapts beautifully to all screen sizes, featuring multiple columns of content, social media links, and a newsletter signup form.

Author:
Morgan Reynolds

1 month ago
Responsive Footer with Multi-Column Layout
A clean, responsive footer design with multiple columns for navigation, contact information, and social media links that adapts beautifully to all screen sizes.

Author:
Bishnu Thapa

1 month ago
Modern Multi-Column Responsive Website Footer
A fully responsive footer component with multi-column layout featuring company information, navigation links, subscription form, and social media integration.

Author:
Bishnu Thapa

1 month ago
Dark Footer with Newsletter Subscription
A sleek dark-themed footer component featuring a newsletter subscription form, brand logo, and essential site links. Perfect for engaging users and capturing leads.

Author:
M. Johnson

2 months ago
Simple Modern Footer with Call-to-Action Button
A lightweight, responsive footer with a prominent call-to-action button, perfect for enhancing conversion rates on any website.

Author:
Julian Parker

1 month ago
Multi-Column Footer with Image Gallery and Social Links

Author:
Aiden Mercer

1 month ago
Interactive Wave Background Animation
Create an engaging website background with smooth wave animations that respond to mouse movement, adding depth and interactivity to your web projects.

Author:
Anonymous

1 month ago
Minimalist Modern Footer Design

Author:
Anonymous

1 month ago
Modern eCommerce Footer with Multiple Sections

Author:
Alex Morgan

1 month ago
Footer Subscription Form with Contact Details

Author:
Alisha Patel

1 month ago
Responsive Minimal Footer
A clean and responsive footer component, perfect for any website. Includes essential links and copyright information.

Author:
Linda Miller

2 months ago

Didn't find component you were looking for?

Search from 500+ components