Footer wave
Free, no sign-up, runs in your browser.
The same geometry as a hero divider, flipped vertically so the fill sits above the curve instead of below it. That one difference is what separates a shape that sits above a footer from one that sits under a header.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 4 |
| Amplitude | 55% |
| Randomness | 20% |
| Baseline | 48% |
| Layers | 2 |
| Smoothness | 100% |
| Seed | 640 |
What to know
- Flipped vertically, so the solid area closes against the top of the canvas.
- Two layers give a little depth without the weight of three.
- Drop it directly above your footer with the same background colour as the footer itself.
What it costs in bytes
This exact shape is 551 bytes as an SVG and 718 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 | 551 B |
| CSS background | 718 B |
| CSS clip-path | 510 B |
The start of the SVG for Footer wave
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="…In more detail
Vertical flip is not a CSS transform here, it is part of the path: the curve is mirrored and the tail closes against the opposite edge. That means the exported SVG stands alone and needs no wrapper with a `transform` on it — which matters most for the CSS background export, where there is no element to transform in the first place.
Questions
How do I change Footer wave once I have it?
Open the generator, click Footer 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 640 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.