Wave Maker
Free online SVG wave generator: create beautiful layered wave backgrounds and section dividers in seconds. Perfect for hero sections, banners, wallpapers, social posts and more.
Free and browser-based - no sign-up needed. Start the app when you are ready.
Any Edge or Stacked
Waves from the bottom, top, left or right - or stacked strata filling the whole canvas.
Fully Customizable
Layers, complexity, height, padding, overlap and contrast, plus curated color palettes.
Export Anywhere
Scalable SVG, PNG at any size or a ready-to-paste CSS class - or copy straight to the clipboard.
Browser-Based
No installs or sign-ups. Everything runs locally in your browser - nothing is uploaded.
About Wave Maker
Wave Maker generates layered SVG waves for websites and designs: the soft section dividers between page blocks, hero header backgrounds, banners and wallpapers. Pick one of six wave styles - flowing curves, regular ripples, scalloped bumps, zigzags, sharp peaks or square steps - then shape the result with the wave count, complexity, wave height, overlap and contrast sliders. Stacking several waves with a little transparency gives the classic layered-depth look in one click.
Every wave is seeded, so the Reshape button explores endless new shapes with the same settings while the sliders keep doing exactly what they say. The waves can run from any edge - bottom, top, left or right - or as stacked waves filling the whole canvas, and blend a palette of two to six colors: as solid layered tints, as a gradient along or across the waves, or radially, with fully opaque or translucent layers - or as outline-only wavy lines with an adjustable line width - over a custom or fully transparent background. Fifteen curated palettes give a designed look in one click, or build your own color by color. The waves also tile seamlessly side by side, so they work as repeating backgrounds too. For repeating surface patterns instead of waves, try our Pattern Maker - or browse the other Create tools.
How it works
-
Pick a wave style
Start the app and choose flowing curves, ripples, bumps, zigzags, peaks or steps - or Mix, which blends the styles across the layers.
-
Shape and color it
Set layers, height, padding, overlap and contrast. Pick a curated palette or your own colors, a color direction, and the edge the waves run from - or stack them across the canvas. Randomize and Reshape explore new looks in one click.
-
Export and use anywhere
Save as scalable SVG, PNG at any size - with presets for dividers, hero headers, social banners and wallpapers - or a ready-to-paste CSS class. Everything copies straight to the clipboard too.
What can I use the waves for?
Section dividers and hero backgrounds on websites, slide and video-call backgrounds, social media banners, email headers, print accents or wallpapers. The SVG export is a real vector, so it stays crisp at any width and is easy to recolor in design tools like Figma, Illustrator or Inkscape. Everything you generate is yours to use freely, for personal and commercial projects alike - no attribution required.
Frequently asked questions
Is Wave Maker free?
Yes, completely free, with no account, watermark or usage limits. The waves you make are yours to use in your own work, commercial projects included - see our License.
What kinds of waves can I make?
Six styles: smooth flowing curves, regular sine ripples, scalloped bumps, straight-line zigzags, sharp mountain-like peaks and square steps - plus a Mix mode that gives every layer its own style, so you never need separate wave, peaks and steps generators. Each can be stacked up to eight layers deep, with controls for wave count, complexity, height, edge padding, overlap and contrast, plus per-style settings like roundness or curl. The waves can run from any edge of the canvas or fill all of it as stacked waves, and blend a palette of two to six colors - layered, along or across the waves, or radially.
Do the waves tile seamlessly?
Yes. Every style is built so the left and right edges match exactly: a seamless wave pattern that repeats side by side without a visible seam - handy for repeating CSS backgrounds.
Which format should I save in?
SVG keeps the wave as vector art that scales to any size without quality loss - ideal for websites and design tools. PNG gives you an image at exactly the size you choose, with presets for common divider, hero, banner and wallpaper sizes; a transparent background is preserved. CSS gives you a background-image rule with the wave embedded as a data URI - paste it onto a section or divider element and it stretches to fit. Every format can also be copied straight to the clipboard.
How do I add the waves to my website?
Two easy ways: download the SVG and place it with an ordinary <img> tag (or paste the markup inline), or choose the CSS export and drop the ready-made class on any section - the wave band embeds as a data URI and stretches to fill the element. No extra files or libraries needed.
How do I make a wave background in CSS?
Pick the CSS format in the save dialog. You get a complete, ready-to-paste class with the wave embedded as a background-image data URI - apply it to a hero section or divider element and it scales with the element. For a full-page wave background, enable Stacked so the waves fill the whole canvas first.
Can I animate the waves?
The tool exports static graphics, but the SVG keeps every wave layer as its own path - so you can animate them afterwards with a few lines of CSS (for example a slow horizontal translate loop per layer for a drifting-ocean effect). Since the waves tile seamlessly, a translated copy loops perfectly.
Is anything uploaded to a server?
No. The waves are generated and exported entirely in your browser; nothing is stored when you close the page.
Which browsers are supported?
All modern browsers: Chrome, Edge, Firefox and Safari, on desktop and mobile.