A straight line between two sections of a page looks rigid. A wave softens the break, and as an SVG it weighs a few hundred bytes and stays sharp on every screen.
Set the number of waves, their height and how many translucent layers are stacked, choose smooth curves, peaks or steps, and shuffle until the shape pleases you. Flip it to use at the top of a section.
How to use the SVG Wave Generator tool
- Set the waves, height and layers.
- Pick the color and press New random wave until you like it.
- Copy the SVG code or download the file.
Popular uses
- Dividers between page sections
- Hero and footer backgrounds
- Decorative edges on cards and banners
Tips for the best result
- Match the wave color to the background of the next section for a seamless join.
- Place the SVG with display: block to avoid a hairline gap underneath.
Quick facts
| Price | Free |
|---|---|
| Works with | SVG, PNG |
| Where it runs | In your browser, on your device |
| Account | Not needed |