CSS Wave Divider Generator
Create SVG wave dividers for sections.
Section Above
Section Below
Frequently Asked Questions
How do I add the wave divider between two sections? +
Place the SVG inline between your HTML sections, or use the CSS method with a pseudo-element (::before or ::after) on the section. The CSS output includes positioning code that overlaps the divider at the section boundary.
What is the difference between the wave styles? +
Smooth creates a gentle sine-wave curve using bezier paths. Choppy generates sharper zigzag peaks. Layered stacks two waves with different amplitudes for a more complex, organic look.
Will the wave scale responsively on different screen sizes? +
Yes. The SVG uses a viewBox attribute and is set to 100% width in CSS, so it scales to fill any container width. The wave height stays fixed in pixels, keeping the shape consistent across devices.
Can I flip the wave to use it at the top of a section instead of the bottom? +
Yes. Use the Flip Direction toggle to invert the wave vertically. This lets you place waves at the top of sections pointing upward or at the bottom pointing downward, depending on your layout.