How do I put an SVG wave divider at the bottom of a section?

Paste the copied SVG at the bottom edge of the section (for example with position: absolute; bottom: 0) and give it a width of 100% and a height in CSS. The markup has a viewBox and preserveAspectRatio="none", which stretches the wave to fill whatever box it gets, so a taller box makes a taller wave. Give the wave the color of the next section so the two blend.

How do I get the same wave again?

Keep the seed. The same size, settings and seed always give the same path. The seed is a field you can type a whole number into (0 to 4294967295) and copy with the Copy seed button, Randomize adds 1 to it, and each preset sets its own seed from 1 to 8.

What do points, amplitude and curve bend change?

Points (2 to 12) is how many curved segments run across the width. Amplitude (10 to 150) sets how high the wave rises: at 50 it starts 50 units above the bottom edge at Hero and Tall sizes, 20.6 at Card and 13.8 at Mobile, because it is scaled to the viewport height. Curve bend (0 to 1) shifts each curve’s control point by a random amount away from the middle of its chord: 0 draws straight segments between the random heights (a zigzag), and higher values bend them more and less evenly, up to 1.

Why are Copy SVG and Download disabled?

The wave color, and the back layer color when there is more than one layer, accept only #rrggbb or #rgb. Anything else draws no wave, the preview says “Enter each color as #rrggbb or #rgb to draw the wave.” and the buttons stay off until the value is a valid hex color.

How do I make layered SVG waves?

Set Layers to 2 to 5. Layer 1 stays in front with the color and seed above; each layer behind it has its own seed field, and the colors blend evenly from the Back color to the front color. With 3 layers, a back color of #9bc9ff and a front color of #007bff, the middle layer is #4ea2ff. Layer opacity, 30 to 100%, is applied to every path, so the back waves show through the front one. Randomize moves every layer to its next seed.

Are the waves quadratic or cubic Bézier curves?

Quadratic. Each segment is one Q command, which takes a single control point, where a cubic C command takes two. One control point per segment keeps the code short: 12 points at Hero size is 469 characters.

SVG Wave Generator

Make an SVG wave divider for the top or bottom of a section: set points, amplitude, curve bend, size and color, then copy the SVG or download SVG or PNG. How it works

Viewport

Color

Layers (1)

Layer 1 is in front and uses the color and seed above. Each layer behind it has its own seed, and the colors blend from the back color to the front color.

Points (3)

Amplitude (50)

Curve bend (0.5)

BottomTop

Seed (the same seed and settings redraw the same wave)

Presets

About the SVG Wave Generator

An SVG wave divider is a single path inside a viewBox, so it stretches to the width of its section. The default wave (Hero size 1440 × 320, 3 points, amplitude 50, bend 0.5, seed 0) is 249 characters of SVG, and a 12-point wave at the same size is 469. Set the points, amplitude, curve bend, edge, size and color, add up to four layers behind the front wave, then copy the SVG or download wave.svg or wave.png.

Viewport sizes and where the wave starts at amplitude 50 and 150

Viewport	Size	Starts above the edge at amplitude 50	Starts above the edge at amplitude 150
Hero	1440 × 320	50	150
Card	800 × 120	20.6	61.9
Mobile	375 × 80	13.8	41.3
Tall	1440 × 600	50	150
Divider	1440 × 160	27.5	82.5

In SVG units, bottom edge, 3 points. The amplitude is scaled down on short viewports (never below 5), so the same setting gives a gentler wave on Card and Mobile.

Length of the SVG by number of points

Points	Characters in the SVG (Hero, amplitude 50, seed 0)
2	225
3	249
6	322
12	469

The whole SVG element as copied, with the color #007bff. Each extra point adds one Q segment of about 24 characters, since every coordinate is rounded to 2 decimals.

How to use this tool

Choose a size: Hero 1440 × 320, Card 800 × 120, Mobile 375 × 80, Tall 1440 × 600, Divider 1440 × 160, or Custom (width 1 to 4000, height 1 to 1000). Or apply one of the eight presets (Gentle, Spiky, Mountain, Straight, Ocean, Ripple, Dramatic, Flat).
Adjust points (2 to 12), amplitude (10 to 150) and curve bend (0 to 1), and pick whether the wave sits on the Top or Bottom edge.
Enter the color as #rrggbb or #rgb. Press Randomize for the next seed or type a seed, then use Copy SVG, Download (wave.svg) or Download PNG (wave.png at the viewport size, 1440 × 320 pixels for Hero).

Frequently asked questions

How do I put an SVG wave divider at the bottom of a section?: Paste the copied SVG at the bottom edge of the section (for example with position: absolute; bottom: 0) and give it a width of 100% and a height in CSS. The markup has a viewBox and preserveAspectRatio="none", which stretches the wave to fill whatever box it gets, so a taller box makes a taller wave. Give the wave the color of the next section so the two blend.
How do I get the same wave again?: Keep the seed. The same size, settings and seed always give the same path. The seed is a field you can type a whole number into (0 to 4294967295) and copy with the Copy seed button, Randomize adds 1 to it, and each preset sets its own seed from 1 to 8.
What do points, amplitude and curve bend change?: Points (2 to 12) is how many curved segments run across the width. Amplitude (10 to 150) sets how high the wave rises: at 50 it starts 50 units above the bottom edge at Hero and Tall sizes, 20.6 at Card and 13.8 at Mobile, because it is scaled to the viewport height. Curve bend (0 to 1) shifts each curve’s control point by a random amount away from the middle of its chord: 0 draws straight segments between the random heights (a zigzag), and higher values bend them more and less evenly, up to 1.
Why are Copy SVG and Download disabled?: The wave color, and the back layer color when there is more than one layer, accept only #rrggbb or #rgb. Anything else draws no wave, the preview says “Enter each color as #rrggbb or #rgb to draw the wave.” and the buttons stay off until the value is a valid hex color.
How do I make layered SVG waves?: Set Layers to 2 to 5. Layer 1 stays in front with the color and seed above; each layer behind it has its own seed field, and the colors blend evenly from the Back color to the front color. With 3 layers, a back color of #9bc9ff and a front color of #007bff, the middle layer is #4ea2ff. Layer opacity, 30 to 100%, is applied to every path, so the back waves show through the front one. Randomize moves every layer to its next seed.
Are the waves quadratic or cubic Bézier curves?: Quadratic. Each segment is one Q command, which takes a single control point, where a cubic C command takes two. One control point per segment keeps the code short: 12 points at Hero size is 469 characters.

Wave dividers for page sections

A wave divider softens the edge between two page sections. The copied SVG is one path per layer in a viewBox, so it scales to any width without blurring. Up to five layers stack waves of different seeds for depth. Every coordinate is rounded to 2 decimals, so the whole element is 225 characters for a 2-point wave and 469 for a 12-point one at Hero size. Six sizes, among them a 1440 × 160 Divider and a custom size up to 4000 × 1000, and eight presets give a starting point; the same seed redraws the same wave. Download PNG saves wave.png at the size in pixels.

How the wave is drawn

Each wave starts at the chosen edge and runs through points random heights, joined by quadratic Bézier curves (the Q path command, one control point per segment).

effective amplitude = max(5, amplitude × min(1, height ÷ 320 × 1.1))

Every height stays at least 8 units from its edge and can reach 1.5 times the effective amplitude. The curve bend setting (0 to 1) shifts each control point by up to half of effective amplitude × bend away from the middle of its chord, so 0 gives straight segments between the heights and higher values bend them more and less evenly.

Example: at amplitude 50 the wave starts 50 units above the bottom edge in the 1440 × 320 Hero viewport and 20.6 in the 800 × 120 Card viewport, because 50 × 120 ÷ 320 × 1.1 = 20.625.

With more than one layer, layer 1 (the front) keeps the color and seed above and each layer behind it draws its own seed. Colors run from the back color to the front color in even steps: color = back + (front − back) × step ÷ (layers − 1). Three layers from #9bc9ff to #007bff are #9bc9ff, #4ea2ff and #007bff.

The SVG sets preserveAspectRatio to none, so the wave stretches to the width and height of whatever box holds it.

Related Tools

View all tools

CSS

SVG Blob Generator

Make an organic SVG blob: set complexity, contrast and smoothness, pick a color, gradient or image fill, then copy SVG, CSS or React, or save a PNG.

CSS

SVG Pattern Generator

Make a seamless SVG pattern tile of dots, squares, plus signs, stripes, checkers, hexagons or triangles; copy CSS with background-size or save SVG or PNG.

Dev

SVG Code Viewer

Paste SVG code to preview it as an image with scripts, event handlers and outside links removed, list its colors and elements, minify it or export React TSX.

Dev

SVG to CSS Background Converter

Convert SVG markup to a CSS background-image data URI, URL-encoded or Base64. Adds a missing xmlns, rejects non-SVG input, gives url() or inline-style output.

CSS

CSS Clip Path Generator

Write clip-path circle(), ellipse(), inset() or polygon() code from sliders, typed points or points you drag, then copy it as CSS, SCSS, React or Tailwind.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.