What colour should the divider be?

The background colour of the section it belongs to. It is the edge of that section, not a shape between two of them.

Should I use an img or inline SVG?

Inline. It is a handful of characters, it can use CSS variables, and it avoids a request.

Why is there a gap under my divider?

Because an inline SVG sits on the text baseline. display: block on the SVG fixes it.

Yes: animate the path's d between shapes with the same number of points, or move the whole SVG with a transform. A transform is much cheaper.

How do I make the wave taller on mobile?

Give the SVG a different height in a media query. The path stretches to whatever height the element has.

SVG Wave Divider Generator

Build a section divider as inline SVG: waves, a curve, a tilt, an arrow or steps, on a stretching viewBox so it fits any width.

Enable JavaScript to change the divider; the markup below is for the defaults.

Shape

wave double draws a second, fainter wave behind the first.

Height, px

The divider's own height, set in CSS. The shape stretches to it, so changing it never changes the path.

Depth, percent

How far the shape rises into the divider, as a percentage of its height. The geometry is drawn in a fixed box so the height stays a CSS matter.

Repeats

How many times a wave or a step pattern repeats across the width.

Flip vertically

Turns a divider that hangs below a section into one that sits above the next.

Fill

Usually the background colour of the section the divider belongs to.

Preview background

Only for this page: the colour behind the divider, so the shape is visible.

The section above

The section below

The divider takes the colour of the section it belongs to, which is what makes it read as that section’s edge.

divider.html

<svg viewBox="0 0 1440 100" preserveAspectRatio="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
	<path d="M0,67 C120,34 240,34 360,67 C480,100 600,100 720,67 C840,34 960,34 1080,67 C1200,100 1320,100 1440,67 L1440,100 L0,100 Z" fill="#1E56EC" />
</svg>

<style>
.section-divider {
	display: block;
	width: 100%;
	height: 120px;
	vertical-align: middle;
}
</style>

How to use

Pick the shape. A wave for something soft, a tilt or a triangle for something graphic, steps for something deliberately blocky.

Set the height and the depth. Height is the space the divider takes; depth is how far the shape rises into it.

Set the fill to the colour of the section the divider belongs to. A divider is the same colour as one of the two sections it separates: that is what makes it look like the edge of that section.

Flip it when the divider should sit above the next section rather than hang below the previous one.

Copy the SVG and the two rules of CSS. Paste the SVG directly into the markup, not as an img: inline SVG can use currentColor and CSS variables.

Example

<svg viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"> <path d="M0,80 C120,40 240,40 360,80 C480,120 600,120 720,80 C840,40 960,40 1080,80 C1200,120 1320,120 1440,80 L1440,120 L0,120 Z" fill="#1E56EC" /> </svg>

preserveAspectRatio="none" is the whole trick: the viewBox is 1440 wide whatever the element is, so the wave stretches sideways and keeps its height.

Pitfalls

A fixed width SVG divider only fits one layout. The stretching viewBox is what makes it work from a phone to an ultrawide.

Stretching distorts a shape that has a fixed aspect, so a circle in a stretching divider becomes an ellipse. Waves and tilts stretch happily; logos do not.

An inline SVG is an inline element, so it sits on the text baseline and leaves a few pixels of gap underneath. display: block removes it, which is why the CSS includes it.

The divider is decoration, so it takes aria-hidden="true". Without that, a screen reader announces a graphic that means nothing.

Encoding an SVG into a background-image URL costs you currentColor, CSS variables and any animation. Inline it unless you need it in a stylesheet.

A divider and the section it borders must share a colour exactly. A one point difference shows as a line at some zoom levels.

Two dividers stacked back to back is usually a mistake: use one, on whichever section owns the shape.

SVG paths do not respond to border-radius or box-shadow. For a shadow under a divider, use a filter: drop-shadow() on the path.

Compatibility

Inline SVG with a viewBox and preserveAspectRatio works in every browser in use. The transform used for flipping is standard SVG. transform-origin on an SVG element needs Chrome 64, Firefox 55 or Safari 14; for older Safari, flip with scale(1, -1) translate(0, -120) instead. The tool runs entirely in your browser.

How to use

Example

Pitfalls

Compatibility

Frequently asked questions

Related tools

SVG Wave Divider Generator

How to use

Example

Pitfalls

Compatibility

Frequently asked questions

Related tools

Tools

CSS Clip Path Generator

CSS Gradient Generator

AI Wireframe Generator

Animated CSS Background Generator

New tools, when there are new tools