Open demo

CSS code

HTML 
<footer class="fw">
  <svg class="fw-wave" viewBox="0 0 1440 70" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <path d="M0,38 C240,72 420,4 720,26 C1020,48 1220,72 1440,30 L1440,70 L0,70 Z"/>
  </svg>
  <div class="fw-body">
    <div class="fw-in">
      <div class="fw-brand"><b>Northwind</b>
        <p>Boards, reviews and release notes for teams that ship every week.</p>
        <ul class="fw-social">
          <li><a href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
          <li><a href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
          <li><a href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
        </ul>
      </div>
      <nav class="fw-links" aria-label="Footer">
        <div><h2>Product</h2><ul><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
        <div><h2>Company</h2><ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li></ul></div>
        <div><h2>Resources</h2><ul><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
      </nav>
    </div>
    <div class="fw-base">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Footer with an inline SVG wave on top. The wave and the footer body share one colour (#4c1d95),
   so change it in both places. */
.fw{color:#cfc4ec}
.fw,.fw *{box-sizing:border-box}
:where(.fw) a{color:inherit;text-decoration:none}
:where(.fw) ul{list-style:none;margin:0;padding:0}
:where(.fw) :is(p,h2){margin:0}
.fw a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fw-wave{display:block;width:100%;height:70px;fill:#4c1d95}
.fw-body{background:#4c1d95;padding:10px 34px 26px;margin-top:-1px}
.fw-in{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.4fr 3fr;gap:32px}
.fw-brand b{display:block;color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:-.02em}
.fw-brand p{font-size:.86rem;line-height:1.65;margin-top:9px;max-width:32ch}
.fw-social{display:flex;gap:9px;margin-top:15px}
.fw-social a{width:33px;height:33px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;
  place-items:center;transition:background-color .15s,color .15s}
.fw-social a:hover{background:rgba(255,255,255,.24);color:#fff}
.fw-social svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.fw-links{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fw h2{color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fw-links ul{display:flex;flex-direction:column;gap:9px;font-size:.85rem}
.fw-links a:hover,.fw-base a:hover{color:#fff}
.fw-base{max-width:1000px;margin:32px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem}
.fw-base ul{display:flex;gap:18px}
@media (max-width:760px){.fw-in{grid-template-columns:1fr}.fw-links{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fw-body{padding:10px 20px 26px}}
@media (prefers-reduced-motion:reduce){.fw-social a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fw">
  <svg class="fw-wave" viewBox="0 0 1440 70" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <path d="M0,38 C240,72 420,4 720,26 C1020,48 1220,72 1440,30 L1440,70 L0,70 Z"/>
  </svg>
  <div class="fw-body">
    <div class="fw-in">
      <div class="row gx-4 gy-4">
        <div class="fw-brand col-md-4"><b>Northwind</b>
          <p class="mt-2 mb-0">Boards, reviews and release notes for teams that ship every week.</p>
          <ul class="fw-social list-unstyled d-flex gap-2 mt-3 mb-0">
            <li><a href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
            <li><a href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
            <li><a href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
          </ul>
        </div>
        <nav class="col-md-8" aria-label="Footer">
          <div class="row row-cols-2 row-cols-md-3 g-4">
            <div class="col"><h2>Product</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Overview</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Changelog</a></li></ul></div>
            <div class="col"><h2>Company</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li><li class="nav-item"><a class="nav-link" href="#">Press</a></li></ul></div>
            <div class="col"><h2>Resources</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">Status</a></li><li class="nav-item"><a class="nav-link" href="#">Support</a></li></ul></div>
          </div>
        </nav>
      </div>
      <div class="fw-base d-flex flex-wrap justify-content-between gap-3 mt-4 pt-3">
        <p class="mb-0">© Northwind Ltd.</p>
        <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li></ul></nav>
      </div>
    </div>
  </div>
</footer>
CSS 
/* Bootstrap grid and .nav.flex-column lists under an inline SVG wave. The wave fill and the
   footer body share one colour (#4c1d95). */
.fw{color:#cfc4ec}
.fw a{text-decoration:none}
.fw a:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
.fw-wave{display:block;width:100%;height:70px;fill:#4c1d95}
.fw-body{background:#4c1d95;padding:10px 34px 26px;margin-top:-1px}
.fw-in{max-width:1000px;margin:0 auto}
.fw-brand b{display:block;color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:-.02em}
.fw-brand p{font-size:.86rem;line-height:1.65;max-width:32ch}
.fw-social a{width:33px;height:33px;border-radius:9px;background:rgba(255,255,255,.12);color:#cfc4ec;
  display:grid;place-items:center;transition:background-color .15s,color .15s}
.fw-social a:hover{background:rgba(255,255,255,.24);color:#fff}
.fw-social svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.fw h2{color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;line-height:normal}
.fw .nav{--bs-nav-link-color:#cfc4ec;--bs-nav-link-hover-color:#fff;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.85rem;gap:9px}
.fw-base{border-top:1px solid rgba(255,255,255,.16);font-size:.81rem}
.fw-base .nav{--bs-nav-link-font-size:.81rem;gap:18px}
@media (max-width:575.98px){.fw-body{padding:10px 20px 26px}}
@media (prefers-reduced-motion:reduce){.fw-social a{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="text-[#cfc4ec]">
  <svg class="block h-[70px] w-full fill-[#4c1d95]" viewBox="0 0 1440 70" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <path d="M0,38 C240,72 420,4 720,26 C1020,48 1220,72 1440,30 L1440,70 L0,70 Z"/>
  </svg>
  <div class="-mt-px bg-[#4c1d95] px-5 pt-2.5 pb-[26px] min-[561px]:px-[34px]">
    <div class="mx-auto grid max-w-[1000px] grid-cols-1 gap-8 min-[761px]:grid-cols-[1.4fr_3fr]">
      <div><b class="block text-[1.1rem] font-extrabold tracking-[-.02em] text-white">Northwind</b>
        <p class="mt-[9px] max-w-[32ch] text-[.86rem] leading-[1.65]">Boards, reviews and release notes for teams that ship every week.</p>
        <ul class="mt-[15px] flex gap-[9px] [&_a]:grid [&_a]:size-[33px] [&_a]:place-items-center [&_a]:rounded-[9px] [&_a]:bg-white/12 [&_a]:transition-colors [&_a]:duration-150 [&_a]:hover:bg-white/24 [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-white [&_a]:motion-reduce:transition-none [&_svg]:size-[15px] [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-2">
          <li><a href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
          <li><a href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
          <li><a href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
        </ul>
      </div>
      <nav class="grid grid-cols-2 gap-8 min-[761px]:grid-cols-3 [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-white" aria-label="Footer">
        <div><h2 class="mb-3 text-[.76rem] font-extrabold tracking-[.08em] text-white uppercase">Product</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
        <div><h2 class="mb-3 text-[.76rem] font-extrabold tracking-[.08em] text-white uppercase">Company</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li></ul></div>
        <div><h2 class="mb-3 text-[.76rem] font-extrabold tracking-[.08em] text-white uppercase">Resources</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
      </nav>
    </div>
    <div class="mx-auto mt-8 flex max-w-[1000px] flex-wrap justify-between gap-4 border-t border-white/16 pt-5 text-[.81rem]">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul class="flex gap-[18px] [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-white"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav>
    </div>
  </div>
</footer>

About this set

A deep violet footer that starts with a soft wave instead of a straight edge. The wave is a single inline SVG path stretched across the full width with preserveAspectRatio=”none”, filled with the same colour as the footer body, so there is no image to load and no seam between the curve and the block below. Inside, a brand column holds the name, a short description and three square social icon links for X, GitHub and LinkedIn; three link columns (Product, Company, Resources) sit beside it, and a legal bar with Privacy and Terms closes the footer. Use it where the page above is light and you want the transition into the footer to feel softer, such as a product landing page or a studio site. On narrow screens the brand column moves on top and the links fall into two columns. The social links get a lighter tile on hover, with the transition removed under reduced motion. Change the fill in one place and the wave and the footer change together.

What’s included

  • Inline SVG wave that shares its fill with the footer body
  • Social icon links for X, GitHub and LinkedIn with accessible names
  • Brand column plus three link columns that fold to two on phones
  • Hover transitions switched off under prefers-reduced-motion
  • Bootstrap grid and .nav.flex-column lists in the Bootstrap version

Accessibility

Each social link has an aria-label such as Northwind on GitHub, and its icon is aria-hidden, as is the decorative wave. Link columns sit in a nav labelled Footer, the legal links in one labelled Legal. Every link shows a 2px white outline on keyboard focus, and the lilac text on violet reaches 6.6:1.

Customise it

Change #4c1d95 in .fw-wave (fill) and .fw-body (background) together, and #cfc4ec for the text. In Bootstrap the link colours are --bs-nav-link-* variables on .fw .nav; in Tailwind edit fill-[#4c1d95] and bg-[#4c1d95]. Edit the path's d attribute for a different curve.