SVG Wave Generator
Generate a decorative SVG wave — a section divider or hero background — from a chosen shape, amplitude, frequency, layers and colours. Copy the SVG, a CSS background-image snippet, or ready-to-paste HTML. Runs entirely in your browser.
Input
Dimensions
Wave height, in pixels.
Number of waves across the width.
Transform
Layers
Background
Animation
Embeds a CSS @keyframes drift in the SVG — the preview and copied code both animate.
Output
Your wave will appear here.
Guides
The SVG Wave Generator builds the flowing wave shapes you see as section
dividers, hero backgrounds and footer edges on modern landing pages — then hands
you the code three ways: the raw SVG, a CSS background-image snippet,
and a ready-to-paste HTML block. Every wave is real vector geometry, so it
stays razor-sharp at any size and weighs a fraction of a PNG.
How to use it
- Pick a wave style — smooth sine, layered waves, sharp zigzag, rounded hills, an asymmetric swell, or a soft organic blob.
- Shape it with amplitude (how tall the wave is) and frequency (how many crests fit across the width), then set the width and height of the canvas.
- Stack up to four layers, each with its own colour and opacity, for the depth-of-field look where paler waves sit behind bolder ones.
- Set a background colour, optionally flip the wave vertically (to hang from the top of a section) or horizontally, and — if you want movement — switch on animation.
- Copy whichever output you need. The preview updates as you go.
The three outputs
- SVG code — a self-contained
<svg>you can drop straight into your markup or save as a.svgfile. The background colour is baked in as a<rect>, so the file looks identical wherever you open it. - CSS background — the same wave URL-encoded into a
background-image: url("data:image/svg+xml,…")rule, ready to attach to any element as a decorative divider. - HTML snippet — a
<div>wrapper with the inline SVG, for pasting into a page without touching your stylesheet.
Does the animation option produce a real animated file?
Yes. When you enable animation, the drift is written into the SVG itself as a
<style> block with CSS @keyframes — no JavaScript, no external file. Because
it lives inside the SVG, the exported code animates on its own anywhere CSS runs,
and the wave is drawn slightly wider than the frame so the sideways drift never
reveals a blank edge.
Will these waves scale without blurring?
They will. Everything is vector path data with preserveAspectRatio="none", so
the shape stretches to fill whatever width you place it at — from a phone to an
ultra-wide monitor — with no loss of quality.
Privacy
The generator runs entirely in your browser. Your colours, dimensions and every other setting stay on your device — nothing is uploaded, and no wave is ever sent to a server.