Create beautiful SVG wave dividers for your website sections. Customize shape, color, size, and download the SVG or copy the code.
SVG dividers sit between sections of a webpage to create a smooth visual transition instead of a hard horizontal line. Place the SVG immediately before or after a section, and set its fill color to match the background of the adjoining section. Use negative margin-bottom to overlap, or set the SVG's display to block so there are no gaps.
Match the SVG fill color to the background color of the section below (or above) it. Set width to 100% and height to your desired wave height. The preserveAspectRatio="none" attribute ensures it stretches to fill any container width.