14 Tailwind CSS Wave Section Dividers
05 / 14

All 14 in 14 Tailwind CSS Wave Section Dividers

  1. 01Tailwind CSS SVG Wave Section Divider with Zero Dependencies
  2. 02Tailwind Animated Wave Section Divider for Landing Pages
  3. 03Tailwind Responsive SVG Wave Divider at the Bottom of a Hero
  4. 04Tailwind Stacked Multi Color SVG Wave Section Divider
  5. 05Tailwind Wave Section Divider Footer Transition
  6. 06Pure Tailwind Clip Path Wave Divider Without SVG
  7. 07Tailwind Inverted Curve SVG Wave Divider
  8. 08Tailwind Wave Divider Full Width Responsive Mobile Fix
  9. 09Tailwind Gradient Wave Section Divider with a Background Mask
  10. 10Tailwind Asymmetrical Organic SVG Section Wave
  11. 11Tailwind Dark Mode Wave Divider Colour Match
  12. 12Tailwind Animated Sine Wave Section Divider Transition
  13. 13Tailwind Wave Section Divider with an Overlay Background Image
  14. 14Tailwind Vertical Wave Divider for Side Navigation
Pure TailwindMIT licensed

Tailwind Wave Section Divider Footer Transition

The seamless hand-off into a dark footer: a curved cutout at the footer’s top edge scoops the page into it, so the footer reads as the bottom of one continuous surface rather than a bolted-on slab. Plus the scalloped variant, which needs no SVG node at all.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="twd-05 w-full min-h-svh flex flex-col font-twd05-sans">

  <!-- Curved cutout into a dark footer -->
  <div class="bg-twd05-page text-twd05-pageink px-6 pt-14 pb-10 text-center">
    <p class="text-[15px]">Last content section of the page.</p>
  </div>
  <footer class="relative overflow-hidden bg-twd05-footer text-white px-6 pt-[clamp(100px,14vw,160px)] pb-8">
    <svg class="absolute inset-x-0 -top-px block w-full h-[clamp(56px,9vw,110px)] text-twd05-page [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,64 C240,120 480,8 720,40 C960,72 1200,120 1440,72 L1440,0 L0,0 Z"></path>
    </svg>
    <nav aria-label="Footer" class="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-7 max-w-[760px] mx-auto">
      <div class="flex flex-col gap-1.5">
        <h3 class="text-xs tracking-[0.14em] uppercase font-semibold text-twd05-accent mb-1">Product</h3>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Features</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Pricing</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Changelog</a>
      </div>
      <div class="flex flex-col gap-1.5">
        <h3 class="text-xs tracking-[0.14em] uppercase font-semibold text-twd05-accent mb-1">Resources</h3>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Docs</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Snippets</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Support</a>
      </div>
      <div class="flex flex-col gap-1.5">
        <h3 class="text-xs tracking-[0.14em] uppercase font-semibold text-twd05-accent mb-1">Company</h3>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">About</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Careers</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Contact</a>
      </div>
    </nav>
    <p class="mt-8 text-center text-[12.5px] text-twd05-fine">&copy; 2027 codefronts.com &mdash; wave divider snippets.</p>
  </footer>

  <!-- Scalloped footer edge, no SVG -->
  <div class="bg-twd05-cream text-twd05-creamink px-6 pt-14 pb-9 text-center">
    <p class="text-[15px]">Newsletter, testimonials, whatever sits above your footer.</p>
  </div>
  <footer class="relative bg-twd05-clay text-white px-6 pt-20 pb-11 text-center before:content-[''] before:absolute before:inset-x-0 before:-top-px before:h-[34px] before:bg-twd05-cream before:pointer-events-none before:[mask:radial-gradient(28px_at_50%_100%,transparent_98%,#000)_repeat-x_0_0/56px_34px]">
    <p class="text-[clamp(22px,3.4vw,32px)] font-bold tracking-[-0.02em] mb-2">codefronts</p>
    <p class="text-sm text-twd05-onclay max-w-[52ch] mx-auto">Scallops read friendlier than a single deep curve &mdash; good for consumer and education sites.</p>
  </footer>

</section>
@import "tailwindcss";

@theme {
  --color-twd05-page: #f3f5f8;
  --color-twd05-page: oklch(0.96 0.01 250);
  --color-twd05-pageink: #414755;
  --color-twd05-pageink: oklch(0.42 0.02 250);
  --color-twd05-footer: #182028;
  --color-twd05-footer: oklch(0.2 0.03 250);
  --color-twd05-onfooter: #dfe4ea;
  --color-twd05-onfooter: oklch(0.9 0.01 250);
  --color-twd05-fine: #b3bcc5;
  --color-twd05-fine: oklch(0.78 0.01 250);
  --color-twd05-accent: #55d6cb;
  --color-twd05-accent: oklch(0.83 0.12 182);
  --color-twd05-cream: #fbf5ec;
  --color-twd05-cream: oklch(0.97 0.02 60);
  --color-twd05-creamink: #4c4239;
  --color-twd05-creamink: oklch(0.42 0.03 60);
  --color-twd05-clay: #40231d;
  --color-twd05-clay: oklch(0.26 0.06 22);
  --color-twd05-onclay: #e8d5d0;
  --color-twd05-onclay: oklch(0.88 0.02 22);
  --font-twd05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.twd-05 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 15.4 mask shim for the scalloped edge — no prefixed variant form exists. */

.twd-05 footer::before {
  -webkit-mask: radial-gradient(28px at 50% 100%, transparent 98%, #000) repeat-x 0 0/56px 34px;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-twd05-page: #f3f5f8;
  --color-twd05-page: oklch(0.96 0.01 250);
  --color-twd05-pageink: #414755;
  --color-twd05-pageink: oklch(0.42 0.02 250);
  --color-twd05-footer: #182028;
  --color-twd05-footer: oklch(0.2 0.03 250);
  --color-twd05-onfooter: #dfe4ea;
  --color-twd05-onfooter: oklch(0.9 0.01 250);
  --color-twd05-fine: #b3bcc5;
  --color-twd05-fine: oklch(0.78 0.01 250);
  --color-twd05-accent: #55d6cb;
  --color-twd05-accent: oklch(0.83 0.12 182);
  --color-twd05-cream: #fbf5ec;
  --color-twd05-cream: oklch(0.97 0.02 60);
  --color-twd05-creamink: #4c4239;
  --color-twd05-creamink: oklch(0.42 0.03 60);
  --color-twd05-clay: #40231d;
  --color-twd05-clay: oklch(0.26 0.06 22);
  --color-twd05-onclay: #e8d5d0;
  --color-twd05-onclay: oklch(0.88 0.02 22);
  --font-twd05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.twd-05 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 15.4 mask shim for the scalloped edge — no prefixed variant form exists. */

.twd-05 footer::before {
  -webkit-mask: radial-gradient(28px at 50% 100%, transparent 98%, #000) repeat-x 0 0/56px 34px;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The scallop mask as a before:[mask:...] arbitrary property is the most surprising win here: a whole decorative edge, tiled and fluid, with no extra element and no SVG — and because the pitch is written inline, changing it is a one-token edit.
  • grid-cols-[repeat(auto-fit,minmax(140px,1fr))] is shorter than the CSS it replaces and, unusually for an arbitrary value, more readable.
  • -top-px mirrors 01's -bottom-px. The fact that the inverted case needs only the one class changed is the clearest sign the pattern ported cleanly.
  • UI change from the CSS original: footer links were rgba(255,255,255,.86) inline text with a 9px gap — roughly 20px tall targets. They are now min-h-11 flex items-center (44px) with a token colour and a visible focus ring, which is what a footer column should have been all along.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Wave Section Divider Footer Transition
Source: https://codefronts.com/layouts/tailwind-css-wave-section-dividers/tailwind-wave-section-divider-footer-transition/

The seamless hand-off into a dark footer: a curved cutout at the footer&rsquo;s top edge scoops the page into it, so the footer reads as the bottom of one continuous surface rather than a bolted-on slab. Plus the scalloped variant, which needs no SVG node at all.
## HTML
```html
<section class="twd-05 w-full min-h-svh flex flex-col font-twd05-sans">

  <!-- Curved cutout into a dark footer -->
  <div class="bg-twd05-page text-twd05-pageink px-6 pt-14 pb-10 text-center">
    <p class="text-[15px]">Last content section of the page.</p>
  </div>
  <footer class="relative overflow-hidden bg-twd05-footer text-white px-6 pt-[clamp(100px,14vw,160px)] pb-8">
    <svg class="absolute inset-x-0 -top-px block w-full h-[clamp(56px,9vw,110px)] text-twd05-page [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,64 C240,120 480,8 720,40 C960,72 1200,120 1440,72 L1440,0 L0,0 Z"></path>
    </svg>
    <nav aria-label="Footer" class="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-7 max-w-[760px] mx-auto">
      <div class="flex flex-col gap-1.5">
        <h3 class="text-xs tracking-[0.14em] uppercase font-semibold text-twd05-accent mb-1">Product</h3>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Features</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Pricing</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Changelog</a>
      </div>
      <div class="flex flex-col gap-1.5">
        <h3 class="text-xs tracking-[0.14em] uppercase font-semibold text-twd05-accent mb-1">Resources</h3>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Docs</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Snippets</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Support</a>
      </div>
      <div class="flex flex-col gap-1.5">
        <h3 class="text-xs tracking-[0.14em] uppercase font-semibold text-twd05-accent mb-1">Company</h3>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">About</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Careers</a>
        <a href="#0" class="w-fit min-h-11 flex items-center text-[14.5px] text-twd05-onfooter no-underline hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-twd05-accent focus-visible:outline-offset-3 rounded-sm">Contact</a>
      </div>
    </nav>
    <p class="mt-8 text-center text-[12.5px] text-twd05-fine">&copy; 2027 codefronts.com &mdash; wave divider snippets.</p>
  </footer>

  <!-- Scalloped footer edge, no SVG -->
  <div class="bg-twd05-cream text-twd05-creamink px-6 pt-14 pb-9 text-center">
    <p class="text-[15px]">Newsletter, testimonials, whatever sits above your footer.</p>
  </div>
  <footer class="relative bg-twd05-clay text-white px-6 pt-20 pb-11 text-center before:content-[''] before:absolute before:inset-x-0 before:-top-px before:h-[34px] before:bg-twd05-cream before:pointer-events-none before:[mask:radial-gradient(28px_at_50%_100%,transparent_98%,#000)_repeat-x_0_0/56px_34px]">
    <p class="text-[clamp(22px,3.4vw,32px)] font-bold tracking-[-0.02em] mb-2">codefronts</p>
    <p class="text-sm text-twd05-onclay max-w-[52ch] mx-auto">Scallops read friendlier than a single deep curve &mdash; good for consumer and education sites.</p>
  </footer>

</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-twd05-page: #f3f5f8;
  --color-twd05-page: oklch(0.96 0.01 250);
  --color-twd05-pageink: #414755;
  --color-twd05-pageink: oklch(0.42 0.02 250);
  --color-twd05-footer: #182028;
  --color-twd05-footer: oklch(0.2 0.03 250);
  --color-twd05-onfooter: #dfe4ea;
  --color-twd05-onfooter: oklch(0.9 0.01 250);
  --color-twd05-fine: #b3bcc5;
  --color-twd05-fine: oklch(0.78 0.01 250);
  --color-twd05-accent: #55d6cb;
  --color-twd05-accent: oklch(0.83 0.12 182);
  --color-twd05-cream: #fbf5ec;
  --color-twd05-cream: oklch(0.97 0.02 60);
  --color-twd05-creamink: #4c4239;
  --color-twd05-creamink: oklch(0.42 0.03 60);
  --color-twd05-clay: #40231d;
  --color-twd05-clay: oklch(0.26 0.06 22);
  --color-twd05-onclay: #e8d5d0;
  --color-twd05-onclay: oklch(0.88 0.02 22);
  --font-twd05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.twd-05 {
  width: 100%;
  min-height: 100svh;
}
/* Safari < 15.4 mask shim for the scalloped edge — no prefixed variant form exists. */

.twd-05 footer::before {
  -webkit-mask: radial-gradient(28px at 50% 100%, transparent 98%, #000) repeat-x 0 0/56px 34px;
}
```

How this works

The footer is relative and the wave is pinned to its top edge, filled with the colour of the section above. Because the fill is the page colour, the curve bites into the footer instead of sitting on it.

<footer class="relative overflow-hidden pt-[clamp(100px,14vw,160px)]">
  <svg class="absolute inset-x-0 -top-px h-[clamp(56px,9vw,110px)] text-twd05-page [&_path]:fill-current">

The scallop variant is pure CSS geometry. A page-coloured strip on the footer's top edge is masked by a repeating radial-gradient, carving identical bites at a fixed pitch. Wider screens get more scallops rather than wider ones — usually more attractive than a stretched curve, and there is nothing in the DOM to show for it.

Make it yours

  • Deepen the scoop by raising the wave height and the footer's pt-[clamp()] together.
  • Scallop pitch: the two numbers at the end of the mask shorthand (/56px_34px) are the tile size.
  • Fill the wave with whatever section precedes the footer, not white by default.
  • Add a stroked copy of the same path in the accent colour for a 1px highlight along the curve.

Gotchas — read before shipping

  • Raise the footer's top padding or the curve crashes into your link columns — this is the detail most page-builder dividers get wrong.
  • Fill the wave with the preceding section's colour. Defaulting to white produces a visible band on any tinted page.
  • overflow-hidden on the footer, or a tall curve can create a scrollbar.
  • Dark footers with opacity-60 links routinely fail WCAG. Use a token at full opacity.
  • The scallop mask needs the -webkit-mask shim for Safari, and it has to be written on the pseudo-element in CSS — there is no prefixed variant form.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

The SVG variant works anywhere; the scallop's mask-image on a pseudo-element needs Safari 15.4+, and without it the strip renders as a straight band.

Techniques used in this demo

Utilitiesfirst-class utility or variant

radial-gradient()tw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →