Wave above the footer
Free, no sign-up, runs in your browser.
The same idea as a hero divider, upside down. The curve is the top edge of the footer, so the fill sits above it and closes against the footer's own colour.
The recipe
| Shape | Footer wave |
|---|---|
| Export as | SVG |
| Size | 551 B |
Step by step
- Pick Footer wave — it is already flipped vertically for this.
- Set the fill to your footer's background colour.
- Copy the SVG and place it immediately above the footer element.
- Remove any margin between the shape and the footer, or a sliver of page background shows through.
What you will be copying
<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="0.35"/><path d="M-360 116.33C-300 112.14,-120 88.78,0 91.21C120 93.64,240 120.61,360 130.91C480 141.…In more detail
Use the vertical flip rather than a CSS `transform: scaleY(-1)`. The flip is baked into the path, so the exported SVG stands on its own with no wrapper and no transform to remember — which matters most if you later switch this to the CSS background export, where there is no element to transform in the first place.
Questions
Which shape should I start from for Wave above the footer?
Footer wave, exported as SVG. That pairing is the one this page is built around, and the preview above is that exact shape — but it is a starting point, not a rule. Every slider stays live once you open it.
How much does it add to the page?
About 551 bytes for this combination. That is smaller than a single icon and it needs no network request at all, because the shape is markup rather than an image file.
Will it work on mobile?
Yes. A wave divider is set to stretch to its container rather than keep its aspect ratio, which is what lets one shape span any screen width without letterboxing. Blobs keep their proportions, since a stretched blob is just an ellipse.
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.