SVG Wave Generator
Create a smooth SVG wave to use as a section divider or hero background. Adjust the amplitude, frequency and height, choose a solid color or a two-stop gradient, stack layered waves for depth, then copy the SVG or download it as a file.
How to generate an SVG wave divider
- Drag the amplitude, frequency and height sliders to shape the wave.
- Pick a solid color or a gradient, set the number of layers and flip the wave if you want it on top.
- Copy the SVG markup or download the .svg file and drop it into your page.
Examples
Single wave divider
width 1440, height 150, amplitude 50, frequency 2, fill #6366f1
<svg viewBox="0 0 1440 150" ...><path d="M 0 ..." fill="#6366f1"/></svg>
Layered gradient wave
amplitude 60, frequency 3, gradient #6366f1 to #ec4899, layers 3
3 stacked <path> elements with falling opacity and a url(#wave-gradient) fill
Frequently asked questions
What do amplitude and frequency control?
Amplitude is the height of each wave crest in pixels, so a larger value makes taller peaks. Frequency is how many full waves fit across the width, so a larger value packs in more, shorter ripples. Height sets the total size of the SVG that the wave fills down to.
How do I use the wave as a section divider?
Paste the SVG at the top or bottom edge of a section and stretch it to full width. Because the SVG uses preserveAspectRatio="none", it scales to any width without distorting the divider. Flip the wave to sit it against the top of the next section.
Why is the path one shape closed to the corners?
A divider needs a solid filled area, not just a line. The wave is sampled into smooth cubic curves and then closed down to the two bottom corners with an L command and a Z, which turns the curve into a fillable shape you can color or gradient.
Can I make the wave a gradient instead of a flat color?
Yes. Switch to gradient mode and pick a start and end color. The tool adds a linearGradient in the SVG defs and fills the wave with it, so the divider fades from one color to the other across its width.
What does the layered option do?
Layering stacks two or three copies of the wave with slightly different phase and amplitude and lower opacity on the back layers. That overlap gives the divider a sense of depth, like rolling water, instead of a single flat curve.
Is my wave sent to a server?
No. The path, preview and SVG markup are all built in your browser as you drag the sliders, so nothing about your design leaves your device.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.