14 CSS Wave Section Dividers

Use an inline SVG absolutely positioned on the seam between two sections. The SVG carries a single <path> filled with the colour of the section it flows into, stretched with width: 100% and preserveAspectRatio="none" so it fluidly adapts to any viewport instead of cropping. The whole divider costs zero requests, zero hydration, and produces zero CLS — unlike Elementor / Divi / WPBakery shape dividers which inject a script and measure the DOM at runtime. Set display: block on the SVG (otherwise the inline baseline leaves a 4-5px hairline gap on some browsers), and use pointer-events: none so the wave never steals clicks from buttons beneath it. Every demo in this collection follows this baseline pattern in Demo 01.

Use clip-path: polygon(...) on the container itself — no SVG element needed. The polygon() function accepts a list of percentage points that trace the wave shape; browsers rasterise it composited on the GPU, so scrolling and resize are jank-free. The trade-off vs SVG: polygon() is a discrete list of straight-line points, so a smooth curve requires ~40-60 vertices to look organic (SVG's <path> uses Bézier curves so 4-6 control points produce the same smoothness). Demo 06 in this collection shows three clip-path polygon variants at 40, 60, and 100 points so you can pick the vertex count that balances smoothness vs stylesheet weight for your project. Browser support: clip-path: polygon() is universal since 2018 (Chrome 55+, Safari 11+, Firefox 54+); the path() function inside clip-path which lets you use full SVG path syntax is Chrome 88+, Safari 13.1+, Firefox 97+ — still safe for modern audiences but check for legacy support before using.

Three fixes, one root cause. The 'white gap' between the wave and the next section comes from three sources that stack: (1) the inline SVG element defaults to display: inline, which reserves inline-baseline space that shows as a 4-5px transparent strip below the SVG — fix with display: block on the <svg>. (2) The default preserveAspectRatio="xMidYMid meet" preserves the source aspect ratio and center-crops horizontally, which on very wide viewports leaves gaps on the sides — fix with preserveAspectRatio="none" to force the SVG to squash to whatever width the parent gives it. (3) Sub-pixel rounding on some retina and Android displays: even after fixing (1) and (2), a 0.5px transparent hairline appears where the SVG bottom edge meets the next section — fix by extending the wave path 1px BELOW the viewBox floor (e.g. L1440,121 L0,121 Z instead of L1440,120 L0,120 Z) so the fill always overlaps the seam. Demo 08 in this collection documents all three fixes and ships a bulletproof pattern that works on iOS Safari, Android Chrome, and Firefox mobile.

Use SVG's <linearGradient> or <radialGradient> as the wave's fill attribute — the wave path itself gets the gradient, so as the wave curves it reveals the gradient underneath in the exact shape of the curve. Alternatively, use mask-image with a data-URI SVG mask: apply a linear or radial gradient background to the section, then mask its top edge with the wave shape — the gradient shows through only where the mask allows. Demo 09 in this collection uses both techniques so you can pick whichever fits your CSS architecture. Note: mask-image still needs the -webkit-mask-image prefix for older Safari (pre-15.4) — the demos include both forms.

Two approaches. (1) Use light-dark() — the newest and cleanest: fill: light-dark(oklch(0.28 0.06 264), oklch(0.16 0.04 264)) — the browser auto-picks the light or dark value based on the user's color-scheme preference. Requires color-scheme: light dark on the root and browsers that support light-dark (Chrome 123+, Safari 17.5+, Firefox 120+). (2) For legacy support, use @media (prefers-color-scheme: dark) to override CSS custom properties: define --next: oklch(0.97 0.01 264) for light mode, then reassign inside the media query. The wave path uses fill: currentColor (or fill: var(--next)) so the single token swap re-themes the whole divider. Demo 11 in this collection shows both patterns side by side, so you can compare the modern one-liner vs the media-query approach and pick what fits your browser-support baseline.

No — inline SVG waves are the fastest possible shape divider pattern. CLS (Cumulative Layout Shift): the divider's height is fixed at authoring time via aspect-ratio, height, or a clamp()ed height. No JS measures the DOM after paint, so nothing reflows — CLS impact is exactly zero. LCP (Largest Contentful Paint): inline SVG is parsed with the HTML, no network request, no image decode — the divider paints in the same frame as the surrounding text, adding nothing to LCP. INP (Interaction to Next Paint): waves are decorative only, with pointer-events: none and no event handlers — they contribute zero to the interaction budget. Contrast with plugin-based shape dividers (Elementor, Divi, WPBakery): those inject a script that measures element widths after paint, forces a layout reflow, and often re-renders the shape on window resize — that's a real CLS + INP hit that a pure-CSS/SVG wave avoids entirely. This is why every demo in this collection ships the inline-SVG or clip-path pattern with zero JavaScript in the primary variant.

SaaS landing page pattern (Stripe / Linear / Vercel style): place the wave at the BOTTOM of the hero, filled with the colour of the section that follows (usually a light section following a dark hero). The wave becomes the top edge of the next section drawn on top of the previous one, not a graphic sitting between two blocks. Recommended height: 80-120px for a subtle transition, 140-200px for a more editorial break. Demo 03 (responsive hero-bottom wave) and Demo 12 (animated sine wave transition) both target this exact scenario. For maximum trust signal on tier-1 SaaS traffic, pair the wave with a full-width customer-logo bar or a subhead like 'Trusted by 10,000+ engineering teams' in the next section — the wave leads the eye down to the social proof. Demo 02 (animated landing page wave) includes a two-line 'Trusted by' pattern below the wave that you can adapt as-is for your own landing page.

The footer transition pattern is one of the highest-CPM applications of a wave divider — fintech / real-estate / legal landing pages typically have a dark navy or deep-slate footer with a light-coloured content section above it, and a wave at that seam makes the page feel authored rather than templated. Demo 05 (footer transition) ships a pattern that inverts on scroll — the wave arc points UP toward the content section, drawing the eye up to the CTA above the fold and creating a natural stopping point before the footer's legal / compliance links. For law firm sites specifically, keep the wave amplitude subtle (max 60-80px) so it reads as professional rather than playful — see ABA Rule 7.1 guidance on law firm marketing tone. For fintech landing pages (Robinhood / Coinbase / Wealthfront style), a slightly deeper wave (100-140px) matches the current design language, and pairing the wave with a gradient fill (Demo 09) adds visual richness without adding weight. Real estate landing pages (Zillow / Redfin style) benefit from asymmetrical organic waves (Demo 10) that echo the softer, home-like brand tone.