Transition between two sections
Free, no sign-up, runs in your browser.
Where two sections of different colours meet in the middle of a page. Layers do more work here than anywhere else, because there are two colours to reconcile rather than one edge to decorate.
The recipe
| Shape | Layered waves |
|---|---|
| Export as | CSS background |
| Size | 1,071 B |
Step by step
- Pick Layered waves to get several curves from one seed.
- Set the two colours to the colours of the sections above and below.
- Export as CSS background and apply it to a short empty div between the two sections.
- Give that div a fixed height — a background image has no intrinsic height to give it one.
What you will be copying
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-288 320Z' fill='%23a5b4fc' opacity='0.35'…In more detail
The empty div is the part worth getting right. A `background-image` does not size its own element, so a div with no height is a div with no shape in it — the most common reason this recipe appears to do nothing. Give it a height in the same units as the rest of your spacing and set `background-size: cover` so the shape fills it at any width.
Questions
Which shape should I start from for Transition between two sections?
Layered waves, exported as CSS background. 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 1,071 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.