SVG Wave & Section Divider Generator
Make layered waves, curves, tilts and arrows to divide page sections — copy SVG or CSS.
Preview
Shape
Presets
Code
About the SVG Wave & Section Divider Generator
Create the decorative edge between two sections of a web page. Choose smooth random waves, regular sine waves, steps, jagged peaks, triangles, rounded curves, a tilt or a centered arrow; set the height, how many waves or points run across the width, and up to five layers that fade toward the back. Random shapes come from a seed, so the same number always gives the same divider — change it, or roll the dice for a new one.
The preview shows the divider between two sections in your own colors, exactly as it will sit on your page. By default the divider takes the color of the section it grows from, so the edge is seamless; flip it vertically to hang it from the upper section instead, or mirror it horizontally. Copy it as inline SVG (it stretches to any width at a fixed height), as a CSS background with the SVG in a data URI, or as raw path data — or download an SVG file or a transparent PNG.
How to use it
- Set the colors of the upper and lower sections to match your page.
- Pick a shape and drag Height, the shape’s count (points, waves, steps…) and Layers. With several layers, set how faint the back layer is.
- For random shapes, change the Random seed or select the dice button until you like the result.
- Tick Flip vertically to hang the divider from the upper section, or Flip horizontally to mirror it.
- Copy the inline SVG or the CSS background, or download the SVG or a PNG at 1× or 2×.
Examples
Triangles · 1 triangle · 1 layer · height 100
<path fill="#5b7cfa" d="M0 100L0 97.5L720 2.5L1440 97.5L1440 100Z"/>
The path starts at the bottom-left corner, climbs to the boundary line, follows it and closes along the bottom, so the shape belongs to the lower section.
Any shape · CSS background
.wave-divider {
height: 100px;
background: url("data:image/svg+xml,…") center bottom / 100% 100% no-repeat;
background-color: #eef2ff;
}background-size 100% 100% and preserveAspectRatio="none" stretch the SVG to the full width at a fixed height. The background color is the upper section’s, so the space above the wave matches it wherever you place the element.
Common uses
- Wavy or angled transitions between hero, feature and footer sections of a landing page.
- Layered “ocean” or mountain backdrops at the bottom of a header.
- Arrow and triangle pointers between steps of a process or a pricing table.
- Divider images for email templates, slides or apps that cannot use inline SVG.
How the dividers are built
Each layer is one closed SVG path in a viewBox as wide as the design width and as tall as the divider (SVG 2 path data). Smooth shapes pass through their points on a Catmull–Rom spline written as cubic Bézier C commands, so the curve is smooth everywhere and goes through every point; steps, peaks, triangles, tilts and arrows use straight L lines, and curves use one quadratic Q arch per bump. With several layers, each layer moves in its own band of the height and the back layers are drawn first, more transparent, so they peek out above the front layer.
Stretching to any screen width
The SVG has preserveAspectRatio="none", so it stretches horizontally to the full width of the page while keeping its height — the shape gets wider on large screens instead of taller. If you prefer the shape to keep its proportions, change the attribute to xMidYMax slice (or set a height that grows with the width, such as height: 10vw). Inline SVG needs display: block in your CSS; otherwise a few pixels of line-height can show as a gap below it.
Limitations
- Each layer has one color (with opacity); gradient fills are not generated — add a
<linearGradient>to the SVG if you need one. - Random shapes depend on the seed and the settings: changing the number of points changes the whole wave.
- PNG downloads are at most 4,096 px wide; use the SVG for larger sizes — it stays sharp at any width.
- Very high point counts on narrow screens can look busy, because the shape is squeezed horizontally.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I add the wave to my website?
Copy the Inline SVG and paste it between the two sections in your HTML, then add .wave-divider { display: block; background-color: …; } to your CSS with the upper section’s color (the hint under the code has it filled in), so the space above the wave matches that section. Or copy the CSS background rule, which already includes that color, and give an empty element (or a ::after pseudo-element) that class.
How do I put the wave at the top of a section instead of the bottom?
Tick Flip vertically. The divider then hangs from the upper section and takes its color. Flip horizontally to mirror the shape.
Why does my wave look stretched on wide screens?
Because the SVG stretches to the full width at a fixed height. Lower the number of points for gentler waves on wide screens, or change preserveAspectRatio as explained above.
Can I get the same wave again later?
Yes. Random shapes come from the seed: the same shape, seed and settings always give the same divider. Copy link saves all the settings in the address.
Is the PNG transparent?
Yes. Only the divider shape is drawn; the rest of the image is transparent, so it works on any background color.
Is anything uploaded?
No. The divider is generated in your browser and the page works offline once loaded.