Wave Footer

Elevate your website with wave footers, adding a stylish and dynamic touch to your design. Learn how to implement wave footers to enhance the user experience of your website's bottom section.

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<footer>
  <div class="background">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      width="100%"
      height="100%"
      viewBox="0 0 1600 900"
    >
      <defs>
        <path
          id="wave"
          fill="rgba(105, 27, 252, 0.6)"
          d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
  s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z"
        />
      </defs>
      <g>
        <use xlink:href="#wave" opacity=".4">
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            dur="8s"
            calcMode="spline"
            values="270 230; -334 180; 270 230"
            keyTimes="0; .5; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
            repeatCount="indefinite"
          />
        </use>
        <use xlink:href="#wave" opacity=".6">
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            dur="6s"
            calcMode="spline"
            values="-270 230;243 220;-270 230"
            keyTimes="0; .6; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
            repeatCount="indefinite"
          />
        </use>
        <use xlink:href="#wave" opacty=".9">
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            dur="4s"
            calcMode="spline"
            values="0 230;-140 200;0 230"
            keyTimes="0; .4; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
            repeatCount="indefinite"
          />
        </use>
      </g>
    </svg>
  </div>
  <section>
    <ul class="socials">
      <li><a class="fa-brands fa-x-twitter"></a></li>
      <li><a class="fa-brands fa-facebook"></a></li>
      <li><a class="fa-brands fa-linkedin"></a></li>
    </ul>
    <ul class="links">
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Portfolio</a></li>
      <li><a>Skillset</a></li>
      <li><a>Hire</a></li>
    </ul>
    <p class="legal">© 2024 All rights reserved</p>
  </section>
</footer>

body {
  margin: 0;
  background: linear-gradient(#1e152e, #161616);
  font-family: "Euclid Circular A", "Poppins";
  color: #d6dfed;
}

html,
body {
  height: 100%;
}

.background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.socials {
  gap: 20px;
}

.socials a {
  font-size: 24px;
}

.links {
  gap: 10px;
}

.legal {
  font-size: 12px;
  margin: 0;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(3) scaleX(2.25);
  transform-origin: bottom;
  box-sizing: border-box;
  display: block;
  pointer-events: none;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 370px;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 30px;
  padding-bottom: 80px;
  padding-left: 60px;
  width: 100%;
}

@media (width > 420px) {
  section {
    align-items: center;
    padding-left: 0;
    gap: 20px;
  }

  .links {
    gap: 20px;
  }
}

```
No need of JavaScript
```

Enhance the visual appeal of your website with a stylish wave footer. This guide will walk you through creating a wave footer using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and customize the wave footer to match your website's design.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the wave footer. Select the code, copy it, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles and the Font Awesome icons:
```
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
```

Step 3: Customize and Make it Yours

Personalize the wave footer to match your website's branding and functionality. Adjust the CSS styles to modify the footer's appearance, colors, and content. Experiment with different wave shapes, background colors, and social media icons to create a footer that seamlessly integrates with your website's design.

By following these steps, you can implement and customize a wave footer on your website using HTML and CSS. Tailor the footer to your specific needs and effectively enhance your website's visual appeal with this stylish and modern component.

Code Explanation

HTML Code

Background with Animated SVG Waves

<div class="background">
  <svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    width="100%"
    height="100%"
    viewBox="0 0 1600 900"
  >
    <!-- SVG content -->
  </svg>
</div>

<div class="background">: Contains the SVG element.
<svg>: The SVG element is used to create scalable vector graphics.
<defs>: Contains definitions that can be reused within the SVG.
<path id="wave">: Defines a wave shape with specific coordinates and a fill color with opacity.
<g>: Groups SVG elements.
<use>: Reuses the wave path defined in the <defs>.
- <animateTransform>: Animates the wave shape using a translation transformation. It defines the duration, key times, and key splines for a smooth animation.

Social Media Links and Navigation Links

<section>
  <ul class="socials">
    <li><a class="fa-brands fa-x-twitter"></a></li>
    <li><a class="fa-brands fa-facebook"></a></li>
    <li><a class="fa-brands fa-linkedin"></a></li>
  </ul>
  <ul class="links">
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Portfolio</a></li>
    <li><a>Skillset</a></li>
    <li><a>Hire</a></li>
  </ul>
  <p class="legal">© 2024 All rights reserved</p>
</section>

<section>: Contains the social media and navigation links, along with legal text.
<ul class="socials">: Unordered list of social media links.
- <li>: List item containing a link.
- <a class="fa-brands fa-x-twitter">: Placeholder for a Twitter icon (presumably using Font Awesome for the icon classes).
<ul class="links">: Unordered list of navigation links.
- <li>: List item containing a link.
- <a>: Anchor tag for navigation (currently without href attributes).
<p class="legal">: Paragraph containing legal text.

CSS Code

General Styles

body and html, body

body {
  margin: 0;
  background: linear-gradient(#1e152e, #161616);
  font-family: "Euclid Circular A", "Poppins";
  color: #d6dfed;
}

html, body {
  height: 100%;
}

margin: 0;: Removes default margin around the body.
background: linear-gradient(#1e152e, #161616);: Sets a vertical gradient background from dark purple to black.
font-family: "Euclid Circular A", "Poppins";: Specifies the fonts used for text.
color: #d6dfed;: Sets the text color to a light shade of blue-gray.
height: 100%;: Ensures the body and html elements take up the full height of the viewport.

Background Styling

.background

.background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

position: absolute;: Positions the background absolutely within its containing element.
z-index: -1;: Places the background behind other elements.
top, left, right, bottom: 0;: Stretches the background to cover the entire container.

List Styles

ul and .socials, .links

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.socials {
  gap: 20px;
}
.socials a {
  font-size: 24px;
}
.links {
  gap: 10px;
}

ul:
- display: flex;: Makes the list a flex container.
- list-style: none;: Removes default list bullets.
- padding: 0;: Removes default padding.
- margin: 0;: Removes default margin.
- .socials: Adds a 20px gap between social media links.
- .socials a: Sets the font size of social media icons to 24px.
- .links: Adds a 10px gap between navigation links.

Legal Text

.legal

.legal {
  font-size: 12px;
  margin: 0;
}

font-size: 12px;: Sets the font size of the legal text to 12px.
margin: 0;: Removes default margin.

SVG Styling

svg

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(3) scaleX(2.25);
  transform-origin: bottom;
  box-sizing: border-box;
  display: block;
  pointer-events: none;
}

position: absolute;: Positions the SVG absolutely within its container.
top, left: 0;: Positions the SVG at the top-left corner.
width, height: 100%;: Makes the SVG cover the entire width and height of the container.
transform: scaleY(3) scaleX(2.25);: Scales the SVG in both X and Y directions.
transform-origin: bottom;: Sets the origin of the transform to the bottom.
box-sizing: border-box;: Includes padding and border in the element’s total width and height.
display: block;: Displays the SVG as a block-level element.
pointer-events: none;: Prevents the SVG from capturing pointer events (clicks, etc.).

Footer Styling

footer

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 370px;
}

position: fixed;: Fixes the footer at the bottom of the viewport.
left: 0;: Aligns the footer to the left edge of the viewport.
bottom: 0;: Aligns the footer to the bottom edge of the viewport.
display: flex;: Makes the footer a flex container.
width: 100%;: Makes the footer span the full width of the viewport.
height: 370px;: Sets the height of the footer.

Section Styling

section

section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 30px;
  padding-bottom: 80px;
  padding-left: 60px;
  width: 100%;
}

display: flex;: Makes the section a flex container.
flex-direction: column;: Stacks children vertically.
justify-content: flex-end;: Aligns children to the bottom of the section.
gap: 30px;: Adds a 30px gap between children.
padding-bottom: 80px;: Adds 80px padding at the bottom.
padding-left: 60px;: Adds 60px padding on the left.
width: 100%;: Makes the section span the full width of the container.

Media Query

@media (width > 420px)

@media (width > 420px) {
  section {
    align-items: center;
    padding-left: 0;
    gap: 20px;
  }
  .links {
    gap: 20px;
  }
}

@media (width > 420px): Applies styles only when the viewport width is greater than 420px.
section:
- align-items: center;: Centers children horizontally.
- padding-left: 0;: Removes left padding.
- gap: 20px;: Reduces the gap between children to 20px.
.links: Adds a 20px gap between navigation links.