Draw the shape that sits between two sections of a page and see it in place as you change it. Make layered waves, simple section dividers like curves, tilts, zigzags and clouds, or soft organic blobs for backgrounds. Fill them with one color or a gradient, then copy the SVG, a CSS background, or a React component, or download an SVG or PNG file.
Layered waves suit friendly, informal brands: travel, food, kids, wellness and creative services. They take more height, so they work best under a hero or above a footer, not between every section. Section dividers are quieter and more geometric. A slight tilt or a shallow curve adds movement to a corporate page without looking playful; zigzags and clouds are deliberately more decorative.
Blobs are not dividers. They sit behind content, for example behind a product photo, a headshot or a group of icons, to soften a layout made mostly of rectangles. Keep them large and low-contrast so text on top stays easy to read.
The simplest method is an empty block between the two sections. Give it the CSS rule from the export, and set its background color to the section above; the shape itself is filled with the color of the section below. That is exactly what the preview does. Because the block is its own element, you can move it, hide it on small screens with a media query, or change its height without touching the sections around it.
If you prefer the shape to belong to a section, place the inline SVG as the first child of that section with display: block and a negative top margin equal to the divider height, so it overlaps the section above. Use whichever is easier to keep tidy in your project; the drawing is the same.
Every shape here is a single path per layer, so the SVG is usually well under a few kilobytes. More crests, more layers and lower smoothness add points, but even the busiest settings stay small compared with an image. The CSS data URI adds a little to that size because some characters are encoded, and it cannot be cached separately, so if you use the same divider on many pages, saving the SVG as a file and pointing the CSS at it is slightly more efficient.
PNG export exists for tools that do not accept SVG, such as some email builders and slide software. On a website, prefer SVG: it stays sharp at every size and is smaller.
Yes. It is free with no signup and no watermark, and everything is drawn in your browser. Nothing you make is sent to We.Inc. You can use the shapes in personal and commercial projects.
The tool places points across a 1440 unit wide box, alternating between a high and a low position, and nudges each one by a seeded random amount when randomness is above zero. It then joins the points with cubic Bezier curves. Smoothness controls how far the curve handles reach: at 0 the points are joined by straight lines, at 100 the curve is fully rounded.
Flip mirrors the shape from left to right, so a tilt that rises to the right rises to the left instead. Invert turns the shape upside down while keeping it attached to the bottom of the box, so a hump becomes a dip and a triangle pointing up becomes a notch.
The SVG uses preserveAspectRatio="none", and the CSS version sets the background size to 100% by 100%. Both let the shape fill any width at the height you chose. Blobs keep their proportions instead, because a stretched blob looks wrong.
They draw the same shape. Inline SVG is easiest to recolor or animate later. The CSS version keeps the shape out of your HTML. The React component is the inline SVG written for JSX, with a unique gradient id per instance so two copies on one page do not clash.
Not inside this tool. A common approach is to put the SVG in a container twice as wide as the screen and slide it sideways with a CSS animation. If you do, wrap the animation in a prefers-reduced-motion media query so people who turn off motion are not shown it.
Related: CSS gradient generator, Color palette generator, SVG to PNG converter, Quick CSS wave code.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.