14 Tailwind CSS Wave Section Dividers
10 / 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 Asymmetrical Organic SVG Section Wave

Non-repeating, hand-drawn-feeling curves for editorial and brand-showcase pages. Symmetry reads as template; asymmetry reads as art direction — these paths deliberately break the mirror, and the blob variant overflows its box on both sides so the curve reads as a fragment of something larger.

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

  <!-- Editorial off-balance sweep -->
  <div class="relative overflow-hidden bg-twd10-ink text-twd10-cream px-[8%] pt-18 pb-33 text-left">
    <p class="font-twd10-mono text-xs tracking-[0.16em] text-twd10-num mb-3.5">01 / Studio</p>
    <h2 class="text-[clamp(28px,5.4vw,54px)] leading-[1.02] tracking-[-0.02em] font-semibold max-w-[16ch]">Curves with<br>a point of view</h2>
    <svg class="absolute inset-x-0 -bottom-px block w-full h-[clamp(66px,10vw,130px)] text-twd10-cream [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 130" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,96 C280,-8 520,104 760,78 C920,60 1120,86 1440,22 L1440,130 L0,130 Z"></path>
    </svg>
  </div>
  <div class="bg-twd10-cream text-twd10-ink px-[8%] pt-3.5 pb-15">
    <p class="text-[15px] max-w-[52ch]">One dominant crest on the left, a long quiet run-out to the right.</p>
  </div>

  <!-- Organic blob fragment -->
  <div class="relative overflow-hidden bg-twd10-deep text-white px-6 pt-18 pb-35 text-center">
    <h2 class="text-[clamp(25px,4.2vw,40px)] leading-[1.06] font-semibold max-w-[22ch] mx-auto">A fragment of something bigger</h2>
    <svg class="absolute -left-[4%] -bottom-px block w-[108%] h-[clamp(90px,14vw,180px)] text-twd10-sand [&_path]:fill-current pointer-events-none" viewBox="0 0 1200 220" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M-40,150 C120,60 280,206 470,168 C640,134 700,44 880,62 C1030,77 1090,150 1240,120 L1240,240 L-40,240 Z"></path>
    </svg>
  </div>
  <div class="bg-twd10-sand text-twd10-deepink px-6 pt-3 pb-15 text-center">
    <p class="text-[15px] max-w-[52ch] mx-auto">The path overflows on both sides, so the curve never looks boxed by the viewport.</p>
  </div>

</section>
@import "tailwindcss";

@theme {
  --color-twd10-ink: #2a2620;
  --color-twd10-ink: oklch(0.24 0.02 60);
  --color-twd10-cream: #f1e4c3;
  --color-twd10-cream: oklch(0.94 0.04 82);
  --color-twd10-num: #b9a97f;
  --color-twd10-num: oklch(0.76 0.05 82);
  --color-twd10-deep: #1a5b66;
  --color-twd10-deep: oklch(0.42 0.08 200);
  --color-twd10-deepink: #235561;
  --color-twd10-deepink: oklch(0.4 0.07 200);
  --color-twd10-sand: #f3edd9;
  --color-twd10-sand: oklch(0.95 0.04 96);
  --font-twd10-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-twd10-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.twd-10 {
  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-twd10-ink: #2a2620;
  --color-twd10-ink: oklch(0.24 0.02 60);
  --color-twd10-cream: #f1e4c3;
  --color-twd10-cream: oklch(0.94 0.04 82);
  --color-twd10-num: #b9a97f;
  --color-twd10-num: oklch(0.76 0.05 82);
  --color-twd10-deep: #1a5b66;
  --color-twd10-deep: oklch(0.42 0.08 200);
  --color-twd10-deepink: #235561;
  --color-twd10-deepink: oklch(0.4 0.07 200);
  --color-twd10-sand: #f3edd9;
  --color-twd10-sand: oklch(0.95 0.04 96);
  --font-twd10-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-twd10-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.twd-10 {
  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&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • Nothing here becomes a utility that should not: the asymmetry lives entirely in the path data, and the port only moves the positioning and fill next to it.
  • -left-[4%] w-[108%] is the whole blob technique in two utilities, and reading them beside overflow-hidden on the parent makes the relationship obvious in a way a stylesheet never did.
  • The editorial variant's px-[8%] gutter is intentionally a percentage rather than a spacing token — the copy's left edge is meant to track the curve's, not a scale.
  • UI change from the CSS original: the studio eyebrow was opacity:.6 cream on near-black (about 3.1:1). It is now a dedicated --color-twd10-num token at full opacity, tuned to the same apparent lightness but clearing 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 Asymmetrical Organic SVG Section Wave
Source: https://codefronts.com/layouts/tailwind-css-wave-section-dividers/tailwind-asymmetrical-organic-svg-section-wave/

Non-repeating, hand-drawn-feeling curves for editorial and brand-showcase pages. Symmetry reads as template; asymmetry reads as art direction &mdash; these paths deliberately break the mirror, and the blob variant overflows its box on both sides so the curve reads as a fragment of something larger.
## HTML
```html
<section class="twd-10 w-full min-h-svh flex flex-col font-twd10-sans">

  <!-- Editorial off-balance sweep -->
  <div class="relative overflow-hidden bg-twd10-ink text-twd10-cream px-[8%] pt-18 pb-33 text-left">
    <p class="font-twd10-mono text-xs tracking-[0.16em] text-twd10-num mb-3.5">01 / Studio</p>
    <h2 class="text-[clamp(28px,5.4vw,54px)] leading-[1.02] tracking-[-0.02em] font-semibold max-w-[16ch]">Curves with<br>a point of view</h2>
    <svg class="absolute inset-x-0 -bottom-px block w-full h-[clamp(66px,10vw,130px)] text-twd10-cream [&_path]:fill-current pointer-events-none" viewBox="0 0 1440 130" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,96 C280,-8 520,104 760,78 C920,60 1120,86 1440,22 L1440,130 L0,130 Z"></path>
    </svg>
  </div>
  <div class="bg-twd10-cream text-twd10-ink px-[8%] pt-3.5 pb-15">
    <p class="text-[15px] max-w-[52ch]">One dominant crest on the left, a long quiet run-out to the right.</p>
  </div>

  <!-- Organic blob fragment -->
  <div class="relative overflow-hidden bg-twd10-deep text-white px-6 pt-18 pb-35 text-center">
    <h2 class="text-[clamp(25px,4.2vw,40px)] leading-[1.06] font-semibold max-w-[22ch] mx-auto">A fragment of something bigger</h2>
    <svg class="absolute -left-[4%] -bottom-px block w-[108%] h-[clamp(90px,14vw,180px)] text-twd10-sand [&_path]:fill-current pointer-events-none" viewBox="0 0 1200 220" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M-40,150 C120,60 280,206 470,168 C640,134 700,44 880,62 C1030,77 1090,150 1240,120 L1240,240 L-40,240 Z"></path>
    </svg>
  </div>
  <div class="bg-twd10-sand text-twd10-deepink px-6 pt-3 pb-15 text-center">
    <p class="text-[15px] max-w-[52ch] mx-auto">The path overflows on both sides, so the curve never looks boxed by the viewport.</p>
  </div>

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

@theme {
  --color-twd10-ink: #2a2620;
  --color-twd10-ink: oklch(0.24 0.02 60);
  --color-twd10-cream: #f1e4c3;
  --color-twd10-cream: oklch(0.94 0.04 82);
  --color-twd10-num: #b9a97f;
  --color-twd10-num: oklch(0.76 0.05 82);
  --color-twd10-deep: #1a5b66;
  --color-twd10-deep: oklch(0.42 0.08 200);
  --color-twd10-deepink: #235561;
  --color-twd10-deepink: oklch(0.4 0.07 200);
  --color-twd10-sand: #f3edd9;
  --color-twd10-sand: oklch(0.95 0.04 96);
  --font-twd10-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-twd10-mono: 'JetBrains Mono', ui-monospace, monospace;
}

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

How this works

An organic edge comes from unequal control points. Keep one dominant crest and let the rest be quiet — the same rule photographers use for composition.

<!-- long sweep, tight pinch, flat run-out -->
<path d="M0,96 C280,-8 520,104 760,78 C920,60 1120,86 1440,22 L1440,130 L0,130 Z"/>

For a truly blobby edge, overflow the box. Variant b authors the path wider than its container (viewBox 0 0 1200 220, positioned at -left-[4%] w-[108%]) so the curve continues past both edges. The eye reads the shape as a fragment, which is what makes it feel organic instead of decorative.

Make it yours

  • Move a single control point 40px. That is usually enough to break symmetry convincingly.
  • Overflow on one side only for a stronger fragment effect.
  • Pair with an off-centre headline — text-left px-[8%] — so the asymmetry is a decision, not a glitch.
  • Add a thin stroked copy of the path in an accent colour for a hand-drawn outline.

Gotchas — read before shipping

  • Asymmetric paths distort unevenly when stretched. Check 480px and 1920px, not just your own window.
  • Keep the deepest point away from where your copy sits — on an asymmetric curve, that point moves.
  • Do not reuse one asymmetric path in five places; it becomes a logo you did not design.
  • The fill and the next section's colour must match exactly, or the fragment reads as a mistake rather than a choice.
  • overflow-hidden on the parent is required for the overflowing blob, or it widens the page.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Plain inline SVG paths — universal support. The floor is Tailwind v4's generated sheet.

Techniques used in this demo

Arbitraryneeds bracket syntax

clamp()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →