~/css/wave-dividers

7 CSS Wave Section Dividers

7 Pure CSSPublished 2026-10-05Free · no sign-up

Seven ways to end a section with something softer than a straight line: an SVG wave, three layered waves for depth, a scalloped edge cut with a mask, a band with waves on both edges, a slowly moving wave, a zigzag strip and a single shallow curve.

Filter demos

01. SVG Wave at the Bottom of a Section

WaveSVG

A section that ends in a smooth wave instead of a straight line. The wave is an inline SVG path stretched with preserveAspectRatio="none", filled with the next section's colour, so the two blocks flow into each other.

View code

<div class="wv1"><section><h3>Grown in Kent</h3><p>Seasonal boxes, delivered on Fridays.</p></section><svg viewBox="0 0 1200 80" preserveAspectRatio="none" aria-hidden="true"><path d="M0 0v40c150 40 300 40 450 10s300-40 450-10 300 40 300 30V0z"/></svg><section class="next"><p>Next section</p></section></div>

.wv1 { width: 520px; max-width: 100%; border-radius: 16px; overflow: hidden; font: 14px Inter, system-ui, sans-serif; }
.wv1 section { padding: 24px 20px 10px; background: #166534; color: #dcfce7; }
.wv1 h3 { margin: 0 0 4px; color: #fff; font-size: 22px; } .wv1 p { margin: 0; }
.wv1 svg { display: block; width: 100%; height: 50px; background: #f0fdf4; }
.wv1 path { fill: #166534; }
.wv1 .next { padding: 20px; background: #f0fdf4; color: #166534; }

02. Layered Waves

WaveDepth

Three wave layers in falling opacity give the divider depth. All three paths sit in one SVG, each a little offset, and the last one matches the colour of the section below so the edge looks finished.

View code

<div class="wv2"><section><h3>Deep dive</h3></section><svg viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true"><path opacity=".35" d="M0 30c200 60 400 60 600 20s400-60 600-10v80H0z"/><path opacity=".6" d="M0 55c200 40 400 40 600 10s400-40 600 0v55H0z"/><path d="M0 80c200 30 400 30 600 5s400-25 600 0v35H0z"/></svg></div>

.wv2 { width: 520px; max-width: 100%; border-radius: 16px; overflow: hidden; background: #082f49; font-family: Inter, system-ui, sans-serif; }
.wv2 section { padding: 34px 20px 0; }
.wv2 h3 { margin: 0; color: #e0f2fe; font-size: 24px; }
.wv2 svg { display: block; width: 100%; height: 80px; }
.wv2 path { fill: #0ea5e9; } .wv2 path:last-child { fill: #f0f9ff; }

03. Scalloped Edge with a Mask

WaveMask

A scalloped bottom edge with no SVG: a mask made of a repeating radial gradient bites round notches out of the section's edge. Change the circle size in the gradient to change the scallops.

View code

<section class="wv3"><h3>Sweet things</h3><p>Fresh pastries every morning.</p></section>

.wv3 { width: 480px; max-width: 100%; box-sizing: border-box; padding: 26px 20px 44px; background: #fbcfe8; color: #831843; font: 14px Inter, system-ui, sans-serif; -webkit-mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% / 28px 100%; mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% / 28px 100%; }
.wv3 h3 { margin: 0 0 4px; font-size: 22px; } .wv3 p { margin: 0; }

04. Waves Top and Bottom

WaveBand

A coloured band with waves on both edges, a soft way to break up a long page. The same SVG is used twice, the top copy flipped with scaleY(-1), so there is only one shape to maintain.

View code

<div class="wv4"><svg viewBox="0 0 1200 60" preserveAspectRatio="none" aria-hidden="true"><path d="M0 60V30c200 30 400 30 600 0s400-30 600 0v30z"/></svg><section><h3>Join 2,000 makers</h3><p>A monthly letter about craft businesses.</p></section><svg class="b" viewBox="0 0 1200 60" preserveAspectRatio="none" aria-hidden="true"><path d="M0 60V30c200 30 400 30 600 0s400-30 600 0v30z"/></svg></div>

.wv4 { width: 480px; max-width: 100%; font: 14px Inter, system-ui, sans-serif; }
.wv4 svg { display: block; width: 100%; height: 36px; } .wv4 svg.b { transform: scaleY(-1); }
.wv4 path { fill: #7c3aed; }
.wv4 section { padding: 10px 20px; background: #7c3aed; color: #ede9fe; text-align: center; }
.wv4 h3 { margin: 0 0 4px; color: #fff; font-size: 22px; } .wv4 p { margin: 0; }

05. Gently Moving Wave Edge

WaveAnimation

The wave along the bottom of the section shifts slowly sideways, a little life for a hero without distraction. The path is twice as wide as the view and seamless, so translating it by half loops perfectly; it is still under reduced motion.

View code

<div class="wv5"><section><h3>Live sea temperatures</h3></section><div class="w" aria-hidden="true"><svg viewBox="0 0 2400 80" preserveAspectRatio="none"><path d="M0 40c150-30 300-30 450 0s300 30 450 0 300-30 450 0 300 30 450 0 300-30 450 0 150 30 150 30v40H0z"/></svg></div></div>

.wv5 { width: 520px; max-width: 100%; border-radius: 16px; overflow: hidden; background: #0c4a6e; font-family: Inter, system-ui, sans-serif; }
.wv5 section { padding: 34px 20px 4px; } .wv5 h3 { margin: 0; color: #e0f2fe; font-size: 22px; }
.wv5 .w { height: 50px; overflow: hidden; }
.wv5 svg { display: block; width: 200%; height: 100%; animation: wv5 10s linear infinite; }
.wv5 path { fill: #f0f9ff; }
@keyframes wv5 { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wv5 svg { animation: none; } }

06. Zigzag Divider

DividerPattern

A sharp zigzag edge made with two linear gradients at 45 degrees as a repeating background along a thin strip. It is pure CSS, tiles to any width and looks at home on playful or retro designs.

View code

<div class="wv6"><section><h3>Summer sale</h3></section><div class="zz" aria-hidden="true"></div><section class="b"><p>Up to 40% off outdoor gear.</p></section></div>

.wv6 { width: 480px; max-width: 100%; border-radius: 16px; overflow: hidden; font: 14px Inter, system-ui, sans-serif; }
.wv6 section { padding: 24px 20px 10px; background: #f59e0b; color: #451a03; } .wv6 h3 { margin: 0; font-size: 24px; }
.wv6 .zz { height: 16px; background: linear-gradient(135deg, #f59e0b 25%, transparent 25%) -16px 0 / 32px 32px, linear-gradient(225deg, #f59e0b 25%, transparent 25%) -16px 0 / 32px 32px, #fffbeb; }
.wv6 .b { padding: 14px 20px 20px; background: #fffbeb; } .wv6 p { margin: 0; }

07. Single Soft Curve

DividerCurve

The calmest divider: one wide, shallow curve made by giving a pseudo-element an elliptical border radius larger than the section. No SVG is needed, and the curve stays smooth at any width because its radius is a percentage.

View code

<section class="wv7"><h3>Our story</h3><p>From a market stall to a studio of six.</p></section>

.wv7 { position: relative; width: 480px; max-width: 100%; box-sizing: border-box; padding: 28px 20px 60px; background: #1e1b4b; color: #c7d2fe; font: 14px Inter, system-ui, sans-serif; overflow: hidden; border-radius: 16px 16px 0 0; }
.wv7 h3 { margin: 0 0 4px; color: #fff; font-size: 22px; } .wv7 p { margin: 0; }
.wv7::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 80px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #e0e7ff; }

About these CSS Wave Section Dividers

SVG paths for waves

A wave is an SVG path inside a viewBox with preserveAspectRatio="none", so it stretches to any width. Fill it with the colour of the next section and the two blocks flow together.

Masks for repeating edges

Scallops and other repeating edges can be cut from a section with a CSS mask made of repeating gradients. No extra element is needed, and the edge works over images too.

Decorative only

Dividers carry no meaning, so the SVG gets aria-hidden="true". Keep the content and headings in the sections themselves.

Mind the seams

Tiny gaps can appear between an SVG and the next section on some screens. Set display: block on the svg, and give it the next section's background colour as a safety net.

Frequently asked questions

Where can I get different wave shapes?

Edit the path's control points, or use the wave generator in this library to design one and copy the SVG.

Will waves slow down the page?

No. An inline SVG path is a few hundred bytes and renders instantly.

Can I put a wave on top of a section?

Yes. Flip the same SVG with transform: scaleY(-1), as the top-and-bottom demo does.