14 Tailwind CSS Wave Section Dividers
07 / 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 Inverted Curve SVG Wave Divider

Concave dips that pull the eye downward into a CTA. The edge scoops inward instead of bulging out, which visually funnels attention to the pinch point — the reason conversion-focused pages use it around signup banners. The lens variant curves both edges and floats the band off the grid.

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-07 w-full min-h-svh flex flex-col font-twd07-sans">

  <!-- Concave CTA funnel -->
  <div class="bg-twd07-page text-twd07-pageink px-6 py-12 text-center">
    <p class="text-[15px]">Features, proof, screenshots&hellip;</p>
  </div>
  <div class="relative overflow-hidden bg-twd07-band text-white px-6 pt-[clamp(88px,12vw,140px)] pb-15 text-center">
    <svg class="absolute inset-x-0 -top-px block w-full h-[clamp(56px,8vw,104px)] text-twd07-page [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 110" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,0 C360,0 420,110 720,110 C1020,110 1080,0 1440,0 L1440,0 L0,0 Z"></path>
    </svg>
    <h2 class="text-[clamp(25px,4vw,40px)] font-semibold mb-2.5">Start your free trial</h2>
    <p class="text-[15px] text-twd07-onband max-w-[44ch] mx-auto">The curve funnels the eye to the centre &mdash; put the button there.</p>
    <a href="#0" class="inline-flex items-center justify-center min-h-11 mt-5 px-7 rounded-full text-[14.5px] font-extrabold text-twd07-bandink bg-twd07-accent no-underline transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-3 motion-reduce:transition-none motion-reduce:hover:translate-y-0">Create account</a>
  </div>
  <div class="bg-twd07-page text-twd07-pageink px-6 py-12 text-center">
    <p class="text-[15px]">&hellip;and the page continues.</p>
  </div>

  <!-- Lens band: arch top + bottom -->
  <div class="bg-twd07-olive text-twd07-oliveink px-6 py-11 text-center">
    <p class="text-[15px]">Section above</p>
  </div>
  <div class="relative overflow-hidden bg-twd07-teal text-white px-6 py-[clamp(80px,11vw,120px)] text-center">
    <svg class="absolute inset-x-0 -top-px block w-full h-[clamp(48px,7vw,86px)] text-twd07-olive [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 90" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,0 C420,0 480,90 720,90 C960,90 1020,0 1440,0 Z"></path>
    </svg>
    <h2 class="text-[clamp(24px,3.8vw,36px)] font-semibold mb-2">A lens for one idea</h2>
    <p class="text-[15px] text-twd07-onteal max-w-[44ch] mx-auto">Curved on both edges, the band floats away from the grid.</p>
    <svg class="absolute inset-x-0 -bottom-px block w-full h-[clamp(48px,7vw,86px)] text-twd07-olive [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 90" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,90 C420,90 480,0 720,0 C960,0 1020,90 1440,90 Z"></path>
    </svg>
  </div>
  <div class="bg-twd07-olive text-twd07-oliveink px-6 py-11 text-center">
    <p class="text-[15px]">Section below</p>
  </div>

</section>
@import "tailwindcss";

@theme {
  --color-twd07-page: #f3f4f9;
  --color-twd07-page: oklch(0.96 0.01 260);
  --color-twd07-pageink: #454a5c;
  --color-twd07-pageink: oklch(0.44 0.03 260);
  --color-twd07-band: #2b2f6b;
  --color-twd07-band: oklch(0.3 0.11 272);
  --color-twd07-bandink: #1d2050;
  --color-twd07-bandink: oklch(0.24 0.08 272);
  --color-twd07-onband: #c9cbe8;
  --color-twd07-onband: oklch(0.85 0.04 272);
  --color-twd07-accent: #f3c651;
  --color-twd07-accent: oklch(0.85 0.15 92);
  --color-twd07-olive: #f1f3e6;
  --color-twd07-olive: oklch(0.95 0.02 110);
  --color-twd07-oliveink: #4a4f3c;
  --color-twd07-oliveink: oklch(0.44 0.04 115);
  --color-twd07-teal: #1c5f5c;
  --color-twd07-teal: oklch(0.42 0.08 185);
  --color-twd07-onteal: #cfe4e2;
  --color-twd07-onteal: oklch(0.89 0.03 185);
  --font-twd07-sans: 'Space Grotesk', system-ui, sans-serif;
}

.twd-07 {
  width: 100%;
  min-height: 100svh;
}

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-twd07-page: #f3f4f9;
  --color-twd07-page: oklch(0.96 0.01 260);
  --color-twd07-pageink: #454a5c;
  --color-twd07-pageink: oklch(0.44 0.03 260);
  --color-twd07-band: #2b2f6b;
  --color-twd07-band: oklch(0.3 0.11 272);
  --color-twd07-bandink: #1d2050;
  --color-twd07-bandink: oklch(0.24 0.08 272);
  --color-twd07-onband: #c9cbe8;
  --color-twd07-onband: oklch(0.85 0.04 272);
  --color-twd07-accent: #f3c651;
  --color-twd07-accent: oklch(0.85 0.15 92);
  --color-twd07-olive: #f1f3e6;
  --color-twd07-olive: oklch(0.95 0.02 110);
  --color-twd07-oliveink: #4a4f3c;
  --color-twd07-oliveink: oklch(0.44 0.04 115);
  --color-twd07-teal: #1c5f5c;
  --color-twd07-teal: oklch(0.42 0.08 185);
  --color-twd07-onteal: #cfe4e2;
  --color-twd07-onteal: oklch(0.89 0.03 185);
  --font-twd07-sans: 'Space Grotesk', system-ui, sans-serif;
}

.twd-07 {
  width: 100%;
  min-height: 100svh;
}
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.

  • Having both edges of the band as sibling SVGs with only the inset utility differing (-top-px / -bottom-px) is the port at its most legible: the lens is obviously a lens when you read the markup.
  • -scale-y-100 exists and works, but for the lens the second path is authored mirrored instead — a flipped transform on an absolutely positioned SVG makes the inset arithmetic harder to reason about for no benefit.
  • The band colours are two tokens (band for the surface, bandink for type on the accent pill), which is what stops the CTA's label from being a hard-coded hex.
  • UI change from the CSS original: the concave band's headline sat at padding-top: clamp(88px,12vw,140px) with copy at opacity:.8. The padding is unchanged, but the supporting copy is now a full-opacity token — at 15px over a mid-dark band, 80% alpha was failing 4.5:1.
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 Inverted Curve SVG Wave Divider
Source: https://codefronts.com/layouts/tailwind-css-wave-section-dividers/tailwind-inverted-curve-svg-wave-divider/

Concave dips that pull the eye downward into a CTA. The edge scoops inward instead of bulging out, which visually funnels attention to the pinch point &mdash; the reason conversion-focused pages use it around signup banners. The lens variant curves both edges and floats the band off the grid.
## HTML
```html
<section class="twd-07 w-full min-h-svh flex flex-col font-twd07-sans">

  <!-- Concave CTA funnel -->
  <div class="bg-twd07-page text-twd07-pageink px-6 py-12 text-center">
    <p class="text-[15px]">Features, proof, screenshots&hellip;</p>
  </div>
  <div class="relative overflow-hidden bg-twd07-band text-white px-6 pt-[clamp(88px,12vw,140px)] pb-15 text-center">
    <svg class="absolute inset-x-0 -top-px block w-full h-[clamp(56px,8vw,104px)] text-twd07-page [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 110" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,0 C360,0 420,110 720,110 C1020,110 1080,0 1440,0 L1440,0 L0,0 Z"></path>
    </svg>
    <h2 class="text-[clamp(25px,4vw,40px)] font-semibold mb-2.5">Start your free trial</h2>
    <p class="text-[15px] text-twd07-onband max-w-[44ch] mx-auto">The curve funnels the eye to the centre &mdash; put the button there.</p>
    <a href="#0" class="inline-flex items-center justify-center min-h-11 mt-5 px-7 rounded-full text-[14.5px] font-extrabold text-twd07-bandink bg-twd07-accent no-underline transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-3 motion-reduce:transition-none motion-reduce:hover:translate-y-0">Create account</a>
  </div>
  <div class="bg-twd07-page text-twd07-pageink px-6 py-12 text-center">
    <p class="text-[15px]">&hellip;and the page continues.</p>
  </div>

  <!-- Lens band: arch top + bottom -->
  <div class="bg-twd07-olive text-twd07-oliveink px-6 py-11 text-center">
    <p class="text-[15px]">Section above</p>
  </div>
  <div class="relative overflow-hidden bg-twd07-teal text-white px-6 py-[clamp(80px,11vw,120px)] text-center">
    <svg class="absolute inset-x-0 -top-px block w-full h-[clamp(48px,7vw,86px)] text-twd07-olive [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 90" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,0 C420,0 480,90 720,90 C960,90 1020,0 1440,0 Z"></path>
    </svg>
    <h2 class="text-[clamp(24px,3.8vw,36px)] font-semibold mb-2">A lens for one idea</h2>
    <p class="text-[15px] text-twd07-onteal max-w-[44ch] mx-auto">Curved on both edges, the band floats away from the grid.</p>
    <svg class="absolute inset-x-0 -bottom-px block w-full h-[clamp(48px,7vw,86px)] text-twd07-olive [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 90" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,90 C420,90 480,0 720,0 C960,0 1020,90 1440,90 Z"></path>
    </svg>
  </div>
  <div class="bg-twd07-olive text-twd07-oliveink px-6 py-11 text-center">
    <p class="text-[15px]">Section below</p>
  </div>

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

@theme {
  --color-twd07-page: #f3f4f9;
  --color-twd07-page: oklch(0.96 0.01 260);
  --color-twd07-pageink: #454a5c;
  --color-twd07-pageink: oklch(0.44 0.03 260);
  --color-twd07-band: #2b2f6b;
  --color-twd07-band: oklch(0.3 0.11 272);
  --color-twd07-bandink: #1d2050;
  --color-twd07-bandink: oklch(0.24 0.08 272);
  --color-twd07-onband: #c9cbe8;
  --color-twd07-onband: oklch(0.85 0.04 272);
  --color-twd07-accent: #f3c651;
  --color-twd07-accent: oklch(0.85 0.15 92);
  --color-twd07-olive: #f1f3e6;
  --color-twd07-olive: oklch(0.95 0.02 110);
  --color-twd07-oliveink: #4a4f3c;
  --color-twd07-oliveink: oklch(0.44 0.04 115);
  --color-twd07-teal: #1c5f5c;
  --color-twd07-teal: oklch(0.42 0.08 185);
  --color-twd07-onteal: #cfe4e2;
  --color-twd07-onteal: oklch(0.89 0.03 185);
  --font-twd07-sans: 'Space Grotesk', system-ui, sans-serif;
}

.twd-07 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

An inverted curve is a normal wave with the fill on the other side of the path. The production route is to author one path and flip it, or to set a wave on both edges of a band so the section becomes a lens.

<svg class="absolute inset-x-0 -top-px …">      <!-- scoops down into the band -->
<svg class="absolute inset-x-0 -bottom-px …">   <!-- mirrored, scoops up -->

The deepest point of a concave curve is at the horizontal centre, so the CTA belongs at the centre. Put it anywhere else and the funnel is decoration; put it there and the geometry is doing work.

Make it yours

  • Move the pinch off-centre by editing the control points for an asymmetric funnel.
  • Shallow dip (30–50px) for text bands, deep (120px+) for full CTA panels.
  • Add a top arch as well to turn the band into a lens/eye shape — variant b.
  • Flip any authored path with -scale-y-100 rather than maintaining a second path.

Gotchas — read before shipping

  • Concave edges eat vertical space exactly where your headline sits. Pad generously or the two collide at some width.
  • -scale-y-100 flips gradients inside the SVG too — define <linearGradient> coordinates with the flip in mind.
  • Do not nest two inverted curves at the same amplitude: on a phone the band pinches shut.
  • Check contrast where the curve overlaps copy on small screens — the band is narrowest exactly where the text is widest.
  • Both waves need pointer-events-none; the bottom one sits directly over the CTA's click area.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms on SVG elements are universal; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:focus-visibletw ↗

Arbitraryneeds bracket syntax

clamp()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →