SVG wave generator.
Make layered SVG waves for the edge of a section, smooth, peaked or stepped, and copy them as SVG, JSX or a CSS background.
SVG wave generator.
Need the UI around it? With Pro, your AI agent builds the form, the result card and the rest of the page from a prompt.
Get ProHow it works
4 steps, no account. It runs in your browser and nothing is uploaded.
Pick the colors
Choose a palette, or set the back and front colors yourself: the front is usually the next section's background.
Shape the waves
Smooth, peaks or steps, 1 to 5 layers, how many waves and how tall, a seed, and Top edge for the top of a section.
Size it
Set the width and height in pixels; the SVG stretches to any box, so the ratio only matters for PNG and WebP.
Copy or download
Copy SVG, JSX or CSS, or download an SVG, PNG or WebP at 1×, 2× or 4×.
Related tools
More design tools. Every one free, in the browser.
Pricing
Build it with Pro
The tool is free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the product around it.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
Questions and answers
Before you trust the result: what to know about the format, the limits, your data and the tools next to it.
Between two sections of a page: the wave sits at the bottom of one, filled with the next section's color, so the edge flows instead of cutting straight across. Flipped, it hangs from the top of a section. Waves also make hero and footer backgrounds.
Each layer is a wave of its own, lower than the one behind it, colored from the back color to the front color. Give the front layer the next section's background and the back layers lighter shades of it, and the divider reads as depth.
Smooth joins the crests with curves, peaks with straight lines, and steps with flat runs and sharp risers, for a terraced look. The seed, waves and height settings shape all three the same way.
The SVG carries preserveAspectRatio="none", so it stretches to the box it is given: make it w-full with a fixed height (h-24, h-40) and the waves meet both edges at any screen width. The CSS version does the same with background-size: 100% auto.
Copy the SVG, a React component (JSX) or CSS with the SVG as a data URI. Download an SVG, or a PNG or WebP at 1×, 2× or 4× the size you set, with a transparent background.
Yes. The waves come from the seed, so the same seed and settings give the same shape on any computer. Shuffle picks a new seed; type any word to get its waves back.
No. Everything is made in your browser and nothing is uploaded.
No. The SVG wave generator is free and opens without a sign-in, an account or an install.
Closest to the SVG wave generator: SVG blob generator, SVG pattern generator, SVG to data URI converter, SVG editor. Each opens on its own page, free and in the browser.
The SVG wave generator is one of 11 in its group. The group's page, /tools/design, lists them all.
The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.
4.9 out of 5 from 150+ developers
Build the product around it
Every block, template and icon, installed by your AI agent in your theme. The tools stay free.
Get Pro