SVG Wave Generator
Generate custom SVG wave section dividers with live preview. Choose wave types, layers, colours, and export as SVG, CSS, or React components.
Wave Controls
Live Preview
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 150" preserveAspectRatio="none">
<path d="M 0 120 C 160.0 105.4, 240.0 140.1, 400.0 123.0 C 560.0 123.4, 640.0 149.3, 800.0 148.3 C 960.0 139.5, 1040.0 77.5, 1200.0 91.6 L 1200 150 L 0 150 Z" fill="#3b82f6" fill-opacity="1" />
</svg>How to use this tool
- 1Choose a wave type
Select Smooth, Sharp, Stepped, or Layered. Each produces a different visual style, from flowing curves to angular peaks to staircase patterns.
- 2Adjust settings
Use sliders to set amplitude (wave height), frequency (complexity), layer count, and overall SVG height. Toggle flip options for different orientations.
- 3Customise colours
Pick a colour and opacity for each layer. Set background colours for the top and bottom sections to preview the wave as a real page divider.
- 4Export your wave
Copy the SVG code, a CSS background-image data URI, or a React/JSX component. You can also download the wave as a standalone .svg file.
Understanding wave types
Smooth waves
Smooth waves use cubic bezier curves to create flowing, organic shapes. They are the most common choice for website section dividers because they feel natural and inviting. Lower frequency produces gentle rolling waves, while higher frequency creates more complex patterns.
Sharp waves
Sharp waves connect points with straight lines, creating angular peaks and valleys. They work well for geometric or technical designs and can evoke mountain ranges or crystal formations depending on the amplitude and frequency settings.
Stepped & Layered
Stepped waves create a staircase pattern using horizontal and vertical line segments, ideal for retro or blocky aesthetics. Layered waves are a variation of smooth waves with doubled control points for a richer, more complex organic feel.
Using SVG waves on your website
SVG wave dividers replace the hard horizontal lines between page sections with flowing, visually interesting transitions. They are used across landing pages, SaaS marketing sites, portfolios, and agency websites to add depth and character without relying on raster images.
Because SVG is vector-based, waves scale to any screen width without pixelation. A typical wave SVG is under 2 KB, making it far lighter than a PNG or JPEG alternative. Using the CSS data URI export eliminates the need for an extra HTTP request entirely. For React or Next.js projects, the JSX export gives you a drop-in component.
Tips for multi-layer waves
Colour gradients
Use variations of the same hue across layers with decreasing opacity to create a sense of depth. The front layer should be the darkest and most opaque, while back layers should be lighter and more transparent.
Amplitude offsets
The generator automatically offsets each layer slightly so they do not overlap perfectly. You can amplify this effect by increasing the amplitude slider. More layers with moderate amplitude produce the most natural parallax-like depth effect.
Flip and orientation
Use the vertical flip to create waves that point upwards, perfect for bottom-of-section dividers. Horizontal flip mirrors the wave pattern. Combining both flips gives you four distinct orientations from a single wave shape.
Get GEO & AEO tips every week
The Layman SEO newsletter. Plain English updates on what is changing in search - SEO, AEO, and GEO - and what to do about it. One email a week. Unsubscribe any time.
No spam. No paywall content. Unsubscribe with one click.