~/css/tailwind-wave-dividers

6 Tailwind Wave Dividers

6 TailwindPublished 2026-10-05Free · no sign-up

Six ways to shape the edge between sections: a single SVG wave, three layered waves, a soft curve from border radius, a slanted clip-path, a zigzag strip from conic gradients and a wave that drifts slowly sideways.

Filter demos

01. Tailwind SVG Wave Divider

TailwindDividerSVG

A smooth wave between a coloured section and the white one below. The SVG uses preserveAspectRatio="none" to stretch to any width, and fill-indigo-700 colours it from the Tailwind palette.

View code

<div class="w-full max-w-sm overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200">
  <section class="bg-indigo-700 px-5 pb-2 pt-6 text-white"><h3 class="text-xl font-bold">Smooth sections</h3><p class="text-sm text-indigo-100">A wave carries the eye down the page.</p></section>
  <svg aria-hidden="true" viewBox="0 0 400 40" preserveAspectRatio="none" class="block h-10 w-full fill-indigo-700"><path d="M0 0h400v20c-50 18-100 18-150 6S150 4 100 14 30 30 0 22z"/></svg>
  <p class="px-5 pb-5 pt-2 text-sm text-slate-600">The next section starts here.</p>
</div>

02. Tailwind Layered Waves

TailwindDividerLayers

Three overlapping waves in the same colour at different opacities, which adds depth to the edge of a hero. The paths are stacked in one SVG and tinted with fill-sky-600 plus opacity utilities.

View code

<div class="w-full max-w-sm overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200">
  <section class="bg-sky-600 px-5 pt-6 text-white"><h3 class="text-xl font-bold">Ocean Club</h3><p class="text-sm text-sky-50">Swim lessons for every age.</p></section>
  <svg aria-hidden="true" viewBox="0 0 400 60" preserveAspectRatio="none" class="block h-14 w-full fill-sky-600"><path class="opacity-30" d="M0 0h400v40c-60 20-120-10-200 5S60 60 0 38z"/><path class="opacity-60" d="M0 0h400v28c-80 22-140-6-210 6S50 40 0 30z"/><path d="M0 0h400v16c-70 16-130-4-200 4S60 26 0 18z"/></svg>
  <p class="px-5 pb-5 text-sm text-slate-600">Book a trial class this week.</p>
</div>

03. Tailwind Curved Section Edge

TailwindDividerCurve

A gentle curve made without SVG: the section's bottom corners get a large elliptical radius using rounded-b-[50%_2.5rem], which reads as one soft arc across the width.

View code

<div class="w-full max-w-sm overflow-hidden rounded-2xl bg-slate-800">
  <section class="rounded-b-[50%_2.5rem] bg-gradient-to-b from-violet-600 to-violet-800 px-5 pb-12 pt-6 text-center text-white"><h3 class="text-xl font-bold">Soft edges</h3><p class="text-sm text-violet-100">An elliptical border radius makes the curve.</p></section>
  <p class="px-5 py-5 text-center text-sm text-slate-300">The next section sits under the arc.</p>
</div>

04. Tailwind Angled Section Divider

TailwindDividerClip-path

A slanted bottom edge from an arbitrary clip-path polygon that cuts the section from the full width at the top to 80% height on the right. Extra bottom padding keeps the text clear of the cut.

View code

<div class="w-full max-w-sm overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200">
  <section class="bg-emerald-700 px-5 pb-14 pt-6 text-white [clip-path:polygon(0_0,100%_0,100%_78%,0_100%)]"><h3 class="text-xl font-bold">Sharper angles</h3><p class="text-sm text-emerald-50">A clip-path polygon slants the edge.</p></section>
  <p class="px-5 pb-5 text-sm text-slate-600">Content continues below the slant.</p>
</div>

05. Tailwind Zigzag Divider

TailwindDividerPattern

A playful zigzag edge drawn by two conic gradients repeated along a short strip. Changing the background size in the arbitrary value changes the size of the teeth.

View code

<div class="w-full max-w-sm overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200">
  <section class="bg-rose-600 px-5 py-6 text-white"><h3 class="text-xl font-bold">Party menu</h3><p class="text-sm text-rose-50">Snacks, cake and lemonade for twenty.</p></section>
  <div aria-hidden="true" class="h-4 [background:conic-gradient(from_-45deg_at_50%_0,#e11d48_90deg,transparent_0)_0_0/24px_100%_repeat-x]"></div>
  <p class="px-5 pb-5 pt-2 text-sm text-slate-600">Order by Thursday for weekend delivery.</p>
</div>

06. Tailwind Moving Wave

TailwindDividerAnimation

A wave that drifts slowly sideways like water. The SVG is twice the container's width and repeats its shape, so a keyframe moving it by half its width loops seamlessly; it stays still for reduced motion.

View code

<div class="w-full max-w-sm overflow-hidden rounded-2xl bg-slate-900">
  <section class="bg-cyan-700 px-5 pt-6 text-white"><h3 class="text-xl font-bold">Tide tables</h3><p class="text-sm text-cyan-50">High water at 14:20 today.</p></section>
  <div class="h-10 overflow-hidden"><svg aria-hidden="true" viewBox="0 0 800 40" preserveAspectRatio="none" class="block h-10 w-[200%] fill-cyan-700 animate-[twwd-drift_8s_linear_infinite] motion-reduce:animate-none"><path d="M0 0h800v20c-50 16-150 16-200 0s-150-16-200 0-150 16-200 0-150-16-200 0z"/></svg></div>
  <p class="px-5 pb-5 text-sm text-slate-300">Check before you set off.</p>
</div>

@keyframes twwd-drift { to { transform: translateX(-50%); } }

About these Tailwind Wave Dividers

Stretch SVG to any width

preserveAspectRatio="none" lets the wave stretch across the section; set its height with h-10 and colour it with fill- utilities.

No SVG needed for simple shapes

An elliptical radius such as rounded-b-[50%_2.5rem] gives a soft curve, and [clip-path:polygon(…)] gives straight angles.

Hide decoration

Dividers carry no meaning, so mark the SVG or strip aria-hidden="true".

Seamless motion

A wave twice as wide as its container with a repeating shape can move by half its width and loop without a jump.

Frequently asked questions

How do I flip a wave?

Add rotate-180 or -scale-y-100 to the SVG.

Will clip-path cut my text?

Only if text reaches the cut area; add bottom padding as in the demo.

Is there a CSS version?

Yes, see the CSS wave dividers collection.