siutil. SVG Wave Generator
processed in your browser · never uploaded

Output

Color

Layers

Height

50%

Waves

3

Preview

Code

 
Everything runs in your browser — your settings are never uploaded.
 
 
   
  
Make the "wave" divider SVG that web designers put between sections of a page — without hand-writing the path — entirely in your browser. Pick a color and stack 1 to 3 layers: the back layers are drawn more transparent and the front more opaque, giving a layered, deep wave. Adjust the height (amplitude) and the number of waves (humps) with sliders, and press Randomize to re-roll the wave shape until you like it. Flip horizontally or vertically to switch between a downward wave for the top of a page and an upward wave for the bottom. There are two outputs: copy the SVG code (starting with `<svg viewBox="0 0 1440 320">`) straight into your HTML, or copy a CSS background that wraps the SVG as a `background-image: url("data:image/svg+xml,…")` data URI to lay behind any element. The preview spans the full width (a 1440×320 ratio) over a checkerboard so you can see the transparent areas, and "Download SVG" saves it as wave.svg. Your color, layers, height, wave count and flip settings are remembered for next time. Generating, previewing and exporting the wave all run entirely in your browser and are never uploaded, stored, or sent to a server.
How to use
  1. Pick a color and choose the number of layers (1–3) to set how the waves stack.
  2. Adjust the height and number of waves with the sliders, flip horizontally/vertically if needed, and hit Randomize to re-roll the shape.
  3. Switch the output between SVG and CSS background, then Copy or Download the SVG.
FAQ
What is a wave SVG for?
It's a decorative way to separate two page sections with a wavy edge instead of a straight line — for example between a hero and the body, or above a footer. It gives a softer, modern look. This tool builds that wave shape and exports it as SVG or CSS.
What do the layers do?
One layer is a single wave; stacking 2–3 layers draws the back waves more transparent and the front more opaque, creating a layered, deep effect. The color stays the same and only the opacity changes, so it reads as one cohesive, gradient-like wave.
Can I flip the wave up/down or left/right?
Yes. "Flip vertically" turns the wave upside down, so you can use a downward wave at the top of a page and an upward wave at the bottom. "Flip horizontally" reverses the direction the wave flows.
Should I use the SVG or the CSS background output?
Use the SVG if you want to drop an `<svg>` straight into your HTML; use the CSS background (a `background-image` data URI) if you want to lay the wave behind an existing element. Both output the same wave.
Is my wave uploaded anywhere?
No. Generating, previewing and exporting the SVG/CSS all run entirely in your browser and are never uploaded, stored, or sent to a server — the tool is fully local.