Generate smooth wave SVG shapes for section transitions on landing pages and marketing sites. Configure amplitude, frequency, and color. Exports inline SVG and CSS.
Available on every plan, including the free tier.
Single file up to 5 MB · 1 file per job
Up to 50 MB per file · batch up to 20 files · API + MCP access
Up to 2 GB per file · unlimited batch · runner acceleration · priority MCP
Set wave amplitude, frequency, color, and direction (left-to-right or reversed)
Preview the wave in real-time as you adjust parameters
Copy the SVG or use the provided HTML/CSS snippet for section dividers
0 bytes uploaded. Wave/Section Divider Generator runs entirely in your browser using the DOM API and Canvas. Your SVGs never leave your device.
Position the SVG absolutely at the bottom of the upper section (bottom: 0; left: 0; width: 100%) or at the top of the lower section. Use fill to match the lower section's background color.
Yes. Generate multiple waves with different amplitudes and slight opacity differences, layering them with different translateY values for a depth effect.
Yes. The generated SVG uses a viewBox and preserveAspectRatio='none' to stretch to any width — it scales perfectly from mobile to 4K desktop.
Generate random organic blob shapes for page backgrounds, section dividers, and hero images. Adjust complexity, smoothness, and color. Exports clean SVG code.
Open toolExtract SVG path coordinates and convert them to CSS clip-path polygon() values. Create custom div shapes, hero cutouts, and image masks without image files.
Open toolWrap your SVG in a semantically correct, responsive HTML container using aspect-ratio CSS. Prevents layout shift (CLS) and ensures proper scaling on all screen sizes.
Open tool