preview-canvas
1440 × 320
generator-controls
Quick Presets
Wave Shape
Pattern
Direction
3
80px
2
50%
40px
Color & Fill
80%
Canvas Width
Canvas Height
free tools · most run in your browser · no signupfree developer tools/most run right in your browser/no signup needed
Create beautiful, customizable SVG wave patterns with true cubic bezier curves.
Design linear or radial gradients visually.
Open tool →Build CSS box-shadow visually.
Open tool →Convert HEX, RGB, HSL color values.
Open tool →Visually build CSS flexbox layouts.
Open tool →Build responsive CSS grid layouts visually.
Open tool →Resize and compress images in the browser.
Open tool →An SVG wave generator creates the curved shapes you see between sections of modern landing pages — wavy headers, footers and dividers — as scalable vector graphics. Because each wave is a single SVG <path>, it stays crisp at any screen width and usually weighs only a few kilobytes. This generator builds every wave from smooth cubic Bézier curves, runs entirely in your browser, and is free with no sign-up or watermark.
Pick Header, Footer, Divider or Background for a ready-made starting point, or choose one of eight wave patterns (smooth, gentle, flowing, subtle, layered, curved, minimal, soft) and a direction: vertical (top/bottom dividers), horizontal (side edges) or diagonal.
Wave Count sets how many crests fit across the canvas, Amplitude sets how tall they are, and Pattern Strength blends the plain sine wave with the selected pattern. Add up to five Layers and use Layer Spacing to stack them for depth — back layers are drawn darker and more transparent.
Use a solid color (with automatically darker back layers), a two-color linear gradient or a rainbow gradient. Set Master Opacity, flip the wave to the top edge, and choose the canvas size — 1440 × 320 is a good default for full-width section dividers.
Download an SVG file or a 2× PNG with a transparent background, or open the Code tab to copy inline SVG markup, a React component, or a CSS background-image rule. The Link button copies a URL that reopens your exact wave.
Paste the SVG between two sections and make it full width. Give the next section the same background color as the wave so the shapes blend seamlessly.
<section class="hero">…</section>
<svg class="wave" viewBox="0 0 1440 320" …>…</svg>
<section class="content">…</section>
.wave { display: block; width: 100%; height: auto; }Choose CSS bg in the Code tab. The SVG is URL-encoded into a data URI, so no extra file or HTTP request is needed, and it is pinned to the bottom (or top, when flipped) of the element.
.hero {
background-image: url("data:image/svg+xml,…");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center bottom;
}Choose React in the Code tab to get a component with JSX attribute names (fillOpacity, stopColor) that forwards props, so you can pass a className.
preserveAspectRatio="none" to the SVG if it must stretch to a fixed height.aria-hidden="true".prefers-reduced-motion, or use the static export.Yes. It is completely free with no sign-up and no watermark, and the SVG, PNG, CSS and React code you export can be used in personal and commercial projects.
Copy the SVG code, paste it between two sections and style it with display: block; width: 100%; height: auto. Give the following section the same background color as the wave so the shapes blend into it.
Yes. Open the Code tab and choose "CSS bg". You get a background-image rule with the SVG URL-encoded as a data URI, plus background-size and background-position values that pin the wave to the correct edge.
Turn on Flip Axis, or use the Header preset. The wave is mirrored so the filled area hugs the top edge, which is what you want under a navigation bar or at the start of a section.
Yes. Turn on Animate to add a gentle bobbing motion using SVG animateTransform. It needs no JavaScript or CSS and keeps working when the SVG is used inline, in an img tag or as a CSS background. The paths extend slightly past the canvas so no gap appears at the edge while they move.
Choose "React" in the Code tab. The output is a component with JSX attribute names such as fillOpacity and stopColor that spreads its props onto the svg element, so you can pass className or style.
Because SVG scales, only the aspect ratio matters. 1440 × 320 is a common choice for full-width dividers; use 160 or 240 px tall for subtle dividers and 480–600 px for hero backgrounds.
Click Link to copy a URL that contains every setting. Opening that URL restores the exact same wave, which is handy for sharing with teammates or coming back to a design later.