Hero section divider
Free, no sign-up, runs in your browser.
The most common thing anyone comes here for: a curve between a coloured hero and whatever is below it, so the two sections meet on a shape instead of a straight line.
The recipe
| Shape | Gentle wave |
|---|---|
| Export as | SVG |
| Size | 322 B |
Step by step
- Open the generator and pick Gentle wave from the preset row.
- Set the fill colour to the background colour of the section *below* the hero, not the hero itself.
- Copy the SVG and paste it as the last element inside your hero.
- Give it `display:block` and `width:100%` so it spans the full width with no gap underneath.
What you will be copying
<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"/></svg>In more detail
The colour is the step people get wrong. The divider is the top edge of the *next* section reaching up into the hero, so it has to be that section's colour — set it to the hero's colour and you get a shape that is invisible against its own background. If there is a one-pixel line under the shape, it is the SVG sitting on its text baseline: `display:block` removes it.
Questions
Which shape should I start from for Hero section divider?
Gentle 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 322 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.