How do I put a wave at the bottom of a section?

Choose Bottom, export the SVG and place it at the end of the section with display:block and width:100%, or use the CSS as a pseudo-element background. Waves use preserveAspectRatio="none", so they stretch to the container’s width. Use Top for the start of the next section, and match the fill to the neighboring background for a seamless edge.

What is the seed for?

All randomness comes from the seed: the same settings and seed always produce the same shape, so you can note it down, reproduce it later or share it with teammates. Shuffle picks a new random seed; when you like a shape, keep its number.

Which coordinate precision should I use?

Precision is the number of decimals kept in path coordinates. Zero gives the smallest file and is visually identical at typical sizes; use one or two decimals for very large renders or fine outlines. Leading zeros and extra spaces are stripped too, to keep the file small.

CSS background or inline SVG?

A CSS background embeds the SVG as a data URI in your stylesheet with no extra request — ideal for pure decoration, but you can’t restyle its colors. Inline SVG or the React component can be styled with CSS or props and animated. Patterns exported as CSS are set to repeat.

🌊

🌊SVG Wave Generator - Blobs, Patterns, Peaks, SVG & CSS

A wave divider at the bottom of a hero section, a soft blob behind a card, a subtle dot or contour texture in empty space — decorations like these are crisp and tiny as SVG. This tool generates four kinds. Waves stack one to six layers with adjustable amplitude, number of crests and randomness, in smooth, sharp or stepped styles, at the top or bottom. Blobs are smooth closed curves through a set of control points, with adjustable complexity and contrast, filled or outlined. Patterns include dots, lines, zigzag, checkerboard and hexagons with tile size, weight and rotation, plus a topographic contour texture traced with marching squares over a noise field. Layered peaks build mountain ridges from fractal noise, shaded from far to near. Any shape can use a two-color gradient or solid fill, a transparent or solid background and any canvas size. Everything is driven by a seed, so the same settings and seed always give the same shape and a new seed gives a new one. Path coordinates are rounded to the precision you choose with redundant zeros stripped, keeping the SVG lean. Download SVG or 1–3× PNG, or copy CSS ready for background-image (a URL-encoded data URI) or a React component that accepts props.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use SVG Wave & Shape Generator

1Choose waves, blob, pattern or layered peaks and adjust layers, amplitude, complexity and so on
2Set colors, gradient, background and canvas size, and click Shuffle to try other seeds
3Download SVG or PNG, or copy the CSS background or React component

FAQ

How do I put a wave at the bottom of a section?: Choose Bottom, export the SVG and place it at the end of the section with display:block and width:100%, or use the CSS as a pseudo-element background. Waves use preserveAspectRatio="none", so they stretch to the container’s width. Use Top for the start of the next section, and match the fill to the neighboring background for a seamless edge.
What is the seed for?: All randomness comes from the seed: the same settings and seed always produce the same shape, so you can note it down, reproduce it later or share it with teammates. Shuffle picks a new random seed; when you like a shape, keep its number.
Which coordinate precision should I use?: Precision is the number of decimals kept in path coordinates. Zero gives the smallest file and is visually identical at typical sizes; use one or two decimals for very large renders or fine outlines. Leading zeros and extra spaces are stripped too, to keep the file small.
CSS background or inline SVG?: A CSS background embeds the SVG as a data URI in your stylesheet with no extra request — ideal for pure decoration, but you can’t restyle its colors. Inline SVG or the React component can be styled with CSS or props and animated. Patterns exported as CSS are set to repeat.