14 Tailwind CSS Wave Section Dividers

Put the wave in a wrapper pinned to the section boundary and let it hang off the edge. In Demo 01 the wave sits in an absolutely positioned container — absolute bottom-0 left-0 w-full — while the section itself is relative overflow-hidden. The SVG gets block w-full h-auto so it spans the full width and keeps its aspect ratio. The single most common alignment mistake is leaving the SVG as an inline element: inline elements sit on the text baseline and leave a few pixels of gap underneath, which is exactly why block matters here. One more rule that trips people up: match the SVG's fill to the next section's background, not the current one, so the wave reads as the following section bleeding upward into this one rather than a shape floating on top.

The gap comes from the SVG being shorter than expected once it scales. An SVG with a fixed viewBox preserves its aspect ratio, so on a wide-but-short phone screen the wave's rendered height shrinks and a sliver of the page background shows through at the seam. Demo 08 puts the broken and fixed versions side by side so you can see it. The fix has three parts: add preserveAspectRatio="none" so the wave stretches to fill its box instead of letter-boxing, set an explicit height with w-full rather than relying on h-auto, and nudge it down one pixel with -mb-px or a translate-y to cover the sub-pixel rounding line browsers leave between the SVG and the next block. Stretching distorts the curve a little, which is fine for a decorative divider but wrong if the shape is meant to be geometrically exact.

Both work; pick by constraint. Demo 06 does it with pure CSS — clip-path: path(...) or a polygon() — so there's zero extra markup and nothing to load, which suits engineers who don't want inline SVG in their components. The trade-offs: clip-path curves are painful to author by hand (you're editing bezier coordinates inside a string), you can't fill the cut region with its own gradient or stroke, and a clipped element hides overflow, so shadows and outlines get chopped at the wave edge. Inline SVG (Demo 01) is more verbose but lets you layer multiple tinted paths, animate a single path's d, and keep a drop shadow on the curve. Rule of thumb: reach for clip-path when the wave is a plain single-colour cut, and reach for SVG the moment you need layering, a gradient fill, or a stroke on the edge.

Continuous motion comes from translating a doubled tile, not from redrawing the path. Demo 02 renders two identical seamless wave tiles side by side in a track twice the width, then animates the track with translateX from 0 to -50% on an infinite linear loop; because tile two is a pixel-perfect copy of tile one, the wrap-around is invisible. The wave has to be built to tile — its left and right edges must meet at the same y-value or you get a jump every cycle. Demo 12 goes further and samples a true y = A·sin(x) curve so the repeat is mathematically seamless rather than eyeballed with bezier handles. Keep the animation on transform only, never on left or background-position, so it stays on the compositor, and wrap it in motion-reduce:animate-none so it holds still for anyone who has asked to reduce motion.

A wave divider is pure decoration, so it should be invisible to assistive tech, not described. For an inline SVG give it aria-hidden="true" and focusable="false" so it isn't announced and can't be tabbed to in older browsers; drop any role and title, because there's nothing meaningful to read out — announcing “wave” is just noise in the reading order. When the wave is a background mask or a clip-path cut (Demos 06 and 09) there's no element to hide, so nothing extra is needed. The real accessibility work is contrast: where a wave carries text or sits over a photo (Demo 13), the content on top must clear WCAG contrast against whatever colour shows through the curve. And the divider must never be the only cue separating two sections — heading text and spacing carry that job for anyone who never sees the shape.

The wave's colour has to follow the theme, and the catch is that the fill should match the adjacent section, not this one. Demo 11 shows three approaches. The robust one keys the fill off a CSS variable that flips with data-theme on the root, so fill: var(--next-bg) updates automatically the moment the toggle changes the attribute — no duplicated markup. The second uses Tailwind's dark: variant, e.g. fill-slate-50 dark:fill-slate-900, which is fine when your dark mode is class-based. The third puts currentColor on the path and sets a text- colour on the wrapper so the wave inherits like an icon. Whichever you pick, the failure mode is identical: forget to update the fill and the wave stays its light-mode colour, leaving a bright band slicing across a dark page. Test the toggle both directions, not just light to dark.

Skip the wave when the boundary needs to read as precise rather than soft. A pricing table, a data grid, a legal or checkout step — anything where users compare rows or scan numbers — wants a crisp horizontal rule, because an organic curve makes two sections feel like one continuous flow and blurs where one block ends and the next begins. Waves also cost height: a tall divider eats 80–160px of vertical space that pushes real content down, which hurts on a mobile hero where the fold is precious. And every wave is one more shape to keep colour-synced across themes and backgrounds — if a page changes section six times, six waves is visual noise, not rhythm. Use them where the tone is marketing, brand or editorial (Demos 02, 03, 10) and the sections genuinely flow into each other; use a plain edge everywhere the content is transactional.

Depth comes from stacking two or three copies of the same wave, each offset and tinted, so the eye reads overlapping curves instead of a single line. In Demo 04 the paths live in one SVG, drawn back-to-front: the palest, most-offset wave first, then progressively darker layers nudged a few pixels down and sideways with a small translate on each path. Keep them in one SVG rather than three separate absolutely positioned ones — a single viewBox guarantees every layer scales together, whereas separate elements drift apart at different viewport widths and the illusion breaks. Tint by lightening or darkening the base section colour by roughly 6–10% per layer, not by introducing new hues, or the stack looks like unrelated stripes rather than one surface folding over itself. Two layers reads as subtle depth; four or more just muddies the edge.