Cloud edge
Free, no sign-up, runs in your browser.
The same arcs as a scallop but far fewer and far deeper, which stops reading as a decorative edge and starts reading as an object — specifically, as a cloud. Good above a footer or below a hero where you want something friendly rather than neutral.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 5 |
| Amplitude | 82% |
| Randomness | 0% |
| Baseline | 50% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 301 |
What to know
- Few, large arcs: the fewer the bumps, the more it reads as a shape rather than a trim.
- Pair it with a soft colour; at this scale a saturated one dominates the section.
- Only 295 bytes for a shape this large.
What it costs in bytes
This exact shape is 295 bytes as an SVG and 456 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 | 295 B |
| CSS background | 456 B |
| CSS clip-path | 487 B |
The start of the SVG for Cloud edge
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 160A144 99.71 0 0 1 0 160A144 99.71 0 0 1 288 160A144 99.71 0 0 1 576 160A144 99.71 0 0 1 864 160A144 99.71 0 0 1 1152 160A144 99.71 0 0 1 1440 160L1440 320L-288 320Z" fill="#4f46e5"/></svg>In more detail
Try this one flipped vertically with the arches cut inward. The same five arcs that read as a cloud hanging down read as a row of alcoves when they bite upward into the fill, and that is a genuinely different divider from the same four settings.
Questions
How do I change Cloud edge once I have it?
Open the generator, click Cloud edge 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 301 with 5 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.