Gentle wave
Free, no sign-up, runs in your browser.
The default for a reason: four points, modest amplitude and almost no randomness make a curve that reads as deliberate rather than decorative. This is the shape most people mean when they say they want a wave under their hero section.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 4 |
| Amplitude | 38% |
| Randomness | 12% |
| Baseline | 55% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 1204 |
What to know
- Low randomness keeps it symmetrical, so it does not fight whatever is above it for attention.
- Four points is the fewest that still gives a rise and a fall — fewer becomes a single sweep, more becomes a ripple.
- At 322 bytes it is small enough to inline rather than fetch as a file.
What it costs in bytes
This exact shape is 322 bytes as an SVG and 483 bytes as a CSS background — the data URI is larger because percent-encoding costs three characters for every character it escapes. Both figures are for the shape shown above, at two decimal places of coordinate precision.
| Format | Size |
|---|---|
| SVG | 322 B |
| CSS background | 483 B |
| CSS clip-path | 514 B |
The start of the SVG for Gentle wave
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></sv…In more detail
If you are going to change one thing, change the baseline rather than the amplitude. Amplitude here is a share of the room between the baseline and the nearer edge, so raising it on a centred wave makes it deeper, while moving the baseline changes how much solid colour sits below the curve — which is usually what people actually want when a divider looks too thin.
Questions
How do I change Gentle wave once I have it?
Open the generator, click Gentle wave in the preset row, then drag anything. The preset is a starting point rather than a lock — every slider stays live, and the seed box takes a word if you would rather name your shape than number it.
Will it look the same next time?
Yes, as long as the seed is the same. This one is seed 1204 with 4 points. The generator is deterministic, so those settings reproduce this exact curve on any device.
Can I use a different colour?
Yes — colour is applied when you export, not baked into the geometry. The preview above uses the tool default; pick your own in the generator and the SVG, the CSS background and the clip-path all follow.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.