SVG Wave Generator

How do I generate an SVG wave for a section divider?

Set the amplitude (crest height), frequency (how many waves) and phase, add up to four layers with their own colour and opacity, pick a solid fill or a linear gradient, then flip it if you want a top divider. The SVG Wave Generator draws a smooth cubic-bezier wave and lets you copy the <svg>, copy a CSS background, or download a .svg — all 100% in your browser.

Smooth wave path built from cubic-bezier curves (clean sine/S curve)
Stack 1–4 layers with individual amplitude, frequency, phase, colour and opacity
Solid colour or two-stop linear gradient at any angle
Flip horizontally or vertically (bottom or top divider); live preview on light/dark
Copy SVG, copy a CSS background-image data URI, or download .svg
100% client-side — the SVG is built from your numbers, nothing uploaded

What is

SVG Wave Divider

An SVG wave divider is a filled vector shape with a smooth, curved top edge — built from cubic-bezier segments across the width and closed to the bottom — used to separate page sections or as a flowing hero background. Because it is SVG it is infinitely scalable and typically under a few KB.

Web Design

Related terms

Cubic BezierSection DividerSVG PathLinear GradientpreserveAspectRatio

Frequently Asked Questions

Everything is 100% client-side. The tool computes the wavy edge from cubic-bezier control points, closes it into a filled shape and renders a live preview in your browser — no file or setting is ever sent to a server, and there is no CDN in the processing path. You can copy the <svg>, copy a CSS background-image data URI, or download a .svg file, and it works offline once the page is cached.

Yes. The wave path is computed from your amplitude, frequency, phase and colours entirely on your device — nothing is uploaded, and there is no server or CDN in the processing path.

Place the SVG at the boundary between two sections and set it to full width with display:block. SVG is an inline element by default, so without display:block a few pixels of gap can appear beneath it. The exported markup already includes preserveAspectRatio="none", which tells the browser to stretch the wave to exactly fill its container width while keeping the pixel height — so the divider spans any page width edge-to-edge. Match the wave colour to the section it sits against for a seamless transition.

Embed the SVG at full width with display:block. The exported SVG sets preserveAspectRatio="none" so it stretches to your container, and display:block removes the small inline-element gap.

Amplitude is the crest height in pixels — bigger amplitude means taller, more dramatic waves. Frequency is how many full waves fit across the width — a low frequency gives one broad gentle curve, a high frequency gives many tight ripples. Phase shifts the whole wave sideways (0–1 of one wavelength); giving each layer a different phase stops the crests from stacking, which is what creates the layered, flowing depth effect. Each layer also has its own colour and opacity.

Amplitude sets how tall the crests are, frequency sets how many waves fit across the width, and phase shifts the wave sideways so layers do not line up.

A wave divider is a flat shape, which is exactly what SVG is best at: it stays razor-sharp at any resolution, is typically well under a few KB (far smaller than an equivalent PNG/JPG), and its colours and gradient can be edited directly in the markup. The only caveat is path complexity — a very high frequency emits more bezier segments and more layers mean more paths, so keeping 1–4 layers and a sensible frequency yields the leanest file. It always stays vector, so it never pixelates, and you can inline it or use it as a CSS background data URI.

For a divider or flat background, yes — SVG is vector, so it stays crisp at any size (Retina/4K), is usually under a few KB, and can be recoloured in code. Very high frequency or many layers add path detail but it never pixelates.

Generate smooth, layered SVG wave shapes for section dividers and backgrounds — amplitude, frequency, phase, 1–4 layers, solid or gradient fill, flip — with a live preview and copy SVG / CSS / download. 100% client-side.

Features

Smooth wave path from cubic-bezier curves (flat tangent at every crest/trough)
Stack 1–4 layers, each with its own amplitude, frequency, phase, colour and opacity
Solid colour or two-stop linear gradient at any angle; flip horizontal / vertical
Live preview on light, white, dark, gradient or checker backdrops
Copy the <svg>, copy a CSS background-image data URI, or download a .svg

PriceFree

CategoryDesign

PlatformAll (any modern browser)

PrivacyThe SVG is built from your numbers locally in your browser; nothing is uploaded

Input: Sliders (amplitude, frequency, phase, opacity, gradient angle), Layer colours / gradient stops (hex), Width & height (px); flip toggles

Output: Complete <svg> markup, CSS background-image data URI snippet, Downloadable .svg file

Detailed Explanation

How It Works

What the SVG Wave Generator Does

The SVG Wave Generator is a 100% client-side design tool that produces smooth, layered SVG wave shapes for use as section dividers between page sections or as flowing hero backgrounds. It builds each wavy edge from cubic-bezier curves and closes it into a filled shape, then lets the user stack up to four layers, apply a solid colour or a linear gradient, flip the shape, and export it as an inline <svg>, a CSS background-image data URI, or a downloadable .svg file. Everything is generated in the browser from the user’s numeric inputs, so nothing is uploaded and there is no server or CDN in the processing path.

Generates smooth SVG wave dividers and layered backgrounds
Wavy edge built from cubic-bezier curves, closed into a filled shape
1–4 layers, solid or two-stop linear gradient, flip horizontal / vertical
Exports inline <svg>, CSS background data URI, or a .svg download
100% client-side — the SVG is computed locally, nothing uploaded

Methodology

How the Smooth Wave Path Is Built

A pure engine (svgWaveEngine.ts) samples the wave at every crest and trough — one sample per half wavelength across the width — and joins neighbouring samples with cubic-bezier segments whose two control points sit a quarter-wavelength inward and at the SAME y as their anchor. Keeping the control points level with each anchor gives a flat tangent at every crest and trough, which reproduces a clean sine / S curve rather than a lumpy polyline. The wavelength is width ÷ frequency, so a higher frequency packs in more waves; amplitude sets the crest height and phase shifts the samples sideways. The path is then closed straight down the right side, across the bottom and up the left so it fills as a solid divider. Multiple such paths are layered with individual amplitude, frequency, phase, colour and opacity, and the whole group can be mirrored with a transform for flipX (mirror the phase) or flipY (move the divider to the top of a section).

Sampled every half wavelength (each crest and trough)
Cubic-bezier control points a quarter-wavelength inward, level with the anchor
Flat tangent at crests/troughs → clean sine/S curve
wavelength = width ÷ frequency; amplitude = crest height; phase = sideways shift
Closed down the sides + bottom into a filled, layered divider shape

Limitations

Scalable SVG, and How to Embed a Divider Correctly

The output is clean, scalable vector SVG — it stays crisp at any resolution (Retina / 4K) and is usually well under a few KB, far smaller than an equivalent raster background. It is HONEST that path complexity grows with the layer count and the wave frequency: a very high frequency emits more bezier segments and more layers mean more paths, so keeping 1–4 layers and a sensible frequency yields the leanest file (it always stays vector and never pixelates). For a section divider, the SVG should be embedded at full width with display:block — SVG is inline by default, so without display:block a few pixels of gap can appear beneath it; the exported markup already includes preserveAspectRatio="none" so the wave stretches to exactly fill its container width while keeping the pixel height. The colours and gradient are the user’s to choose to match their design system; for a seamless divider the wave colour should match the section it borders.

Clean, scalable SVG — crisp at any size, usually under a few KB
Path complexity grows with layer count and frequency (keep 1–4 layers)
For a divider: full width + display:block to avoid an inline-element gap
Exported SVG uses preserveAspectRatio="none" to stretch to the container
Colours / gradient are the user’s — match the bordering section for a seamless join

SVG wave dividers vs raster (PNG/JPG) section backgrounds
Aspect	SVG wave (AnyTool)	PNG / JPG background
Scaling	Vector — crisp at any size (Retina/4K)	Fixed pixels — blurs when scaled up
File size	Usually well under a few KB	Often tens to hundreds of KB
Recolour	Edit the fill / gradient in code	Re-export the image
Responsive stretch	preserveAspectRatio="none" fills any width	Distorts or crops when resized
Layering / depth	1–4 overlapping waves with opacity	Baked into one flat image
Where it is generated	Entirely in your browser	Usually an online image editor / upload
Divider gap fix	Full width + display:block	Same layout care needed

SVG waves are ideal for flat dividers and backgrounds: scalable, tiny and recolourable. Path complexity grows with layer count and frequency but it never pixelates. For a divider, embed at full width with display:block. Comparison as of July 2026.

Cite This Page

Title: SVG Wave Generator (design smooth, layered SVG wave shapes for section dividers and flowing hero backgrounds — control amplitude, frequency, phase, 1–4 layers, per-layer colour and opacity, a solid fill or a linear gradient, and horizontal / vertical flip — with a live preview and copy-SVG, copy-CSS-background and download-.svg outputs; 100% client-side, nothing uploaded)
Author: AnyTool
Published: January 1, 2026
Modified: February 8, 2026
Section: Design
URL: https://www.anytool.tech/svg-wave-generator

Formatted Citation

AnyTool. "SVG Wave Generator (design smooth, layered SVG wave shapes for section dividers and flowing hero backgrounds — control amplitude, frequency, phase, 1–4 layers, per-layer colour and opacity, a solid fill or a linear gradient, and horizontal / vertical flip — with a live preview and copy-SVG, copy-CSS-background and download-.svg outputs; 100% client-side, nothing uploaded)." AnyTool, January 1, 2026. https://www.anytool.tech/svg-wave-generator

A 100% client-side SVG Wave Generator that produces smooth, layered SVG wave shapes — the section dividers designers drop between page sections and the flowing waves behind hero backgrounds — entirely in the browser with no server call, no CDN in the processing path and no upload, so the SVG is built purely from the user’s numeric inputs on their device. A pure engine (svgWaveEngine.ts) builds the wavy edge from cubic-bezier curves: it samples the wave at every crest and trough (one sample per half wavelength, where wavelength = width ÷ frequency) and joins neighbouring samples with cubic beziers whose two control points sit a quarter-wavelength inward and at the SAME y as their anchor, giving a flat tangent at every crest and trough that reproduces a clean sine / S curve rather than a lumpy polyline; amplitude sets the crest height, frequency sets how many waves fit across the width, and phase shifts the samples sideways (0–1 of one wavelength). The path is then closed straight down the right side, across the bottom and up the left so it fills as a solid divider shape. buildWaveSvg composes one or more of these paths into a complete <svg> (with viewBox, explicit width/height and preserveAspectRatio="none"), drawing 1–4 LAYERS in order (back to front) each with its own amplitude, frequency, phase, colour and fill-opacity so overlapping tints read as depth (the ocean / hero look); an optional two-stop linear gradient (with an angle converted to an objectBoundingBox x1/y1/x2/y2 vector) can back every layer via a <defs><linearGradient>, and flipX (mirror left↔right) or flipY (mirror top↔bottom, to move the divider to the top of a section) is applied as an SVG transform on a wrapping group. A secure randomiser (crypto.getRandomValues with a Math.random fallback, since the output is purely visual) produces a fresh, good-looking layered set from a curated palette, and svgToDataUri / svgToCss emit a URL-encoded data URI and a ready-to-paste CSS background-image rule. The React page provides sliders for amplitude, frequency, phase and opacity, per-layer colour pickers, gradient stops and angle, width/height fields, flip toggles, a randomize and a reset button, and a large live preview rendered on a selectable light / white / dark / gradient / checker backdrop (full width with display:block, exactly as it should be embedded), plus copy-SVG, copy-CSS and download-.svg actions (the download object URL is created and then revoked). It is prominently HONEST: the output is clean, scalable vector SVG that stays crisp at any resolution and is usually well under a few KB, but path complexity grows with the layer count and the wave frequency (a very high frequency emits more bezier segments), so keeping 1–4 layers and a sensible frequency yields the leanest file; for a section divider the SVG must be embedded at full width with display:block (SVG is inline by default, so otherwise a small gap can show beneath it) and the exported markup already sets preserveAspectRatio="none" so the wave stretches to fill any container width; and the colours and gradient are the user’s to choose to match their design system, with the wave colour ideally matching the bordering section for a seamless join. It supports dark mode and a mobile-first responsive layout with a sticky Copy SVG / Download bar, and has exactly three horizontal ad slots.