SVG Wave Generator
Create decorative SVG wave dividers for websites.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"> <path d="M0 120 L0 0 C160 84 320 36 480 0 C640 36 800 84 960 0 C1120 84 1280 36 1440 0 L1440 120 Z" fill="#2563eb" fill-opacity="1" /> </svg>
How to Use the SVG Wave Generator
Adjust the wave height and wave count sliders to shape your wave. Choose a color for each layer, set the opacity, and toggle the flip button to switch between top and bottom orientation. Add up to 3 layers with different colors and opacities for a layered wave effect. Click "Copy SVG" to grab the raw SVG markup, "Copy CSS Background" for an inline CSS background, or "Download SVG" to save the file.
Frequently Asked Questions
What is an SVG wave divider?
An SVG wave divider is a decorative shape placed between page sections to create smooth, curved transitions instead of straight edges.
Can I use multiple layers?
Yes. You can add up to 3 wave layers with independent colors, opacities and heights to create depth and visual interest.
How do I add the wave to my website?
Copy the SVG code and paste it directly into your HTML, or use the CSS background option to apply it as an inline background image on any element.
What does the flip option do?
Flip switches the wave orientation. "Top" places the wave curve at the top edge and "Bottom" places it at the bottom, so you can use it as a section divider from either direction.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →