Wave SVG. Sine · triangle · blob · layered. Web section dividers, social.
🌊 Preview

How to use

  1. Pick wave type (sine / triangle / blob / layered).
  2. Set width and height.
  3. Adjust cycles and amplitude.
  4. Choose colors / gradient.
  5. Download SVG/PNG for web headers, footers, dividers.

Key features

  • 4 types (sine / triangle / blob / layered)
  • 1–12 cycles, 10–90% amplitude
  • Gradient or solid
  • 5 presets (cyan / pink / zigzag / orange / green)
  • Flip-vertical + transparent background

Use cases

  • Website section dividers — smooth area transitions
  • Hero-banner bottom — escape the rectangle
  • Instagram card backgrounds — modern design
  • YouTube thumbnails — dynamic backgrounds
  • Event posters — ocean / summer themes

Why waves are trending

A 2020s web-design staple. Clean rectangular sections got boring, so curved/wave dividers became the new standard. Sine = soft and natural, triangle = modern and technical, blob = friendly and organic. Layered (stacked waves) adds depth for a pro look.

FAQ

Embed in HTML?

Copy SVG and paste between `<section>` tags. Set width:100% for responsive. SVG uses preserveAspectRatio="none" for stretching.

Flip up/down?

Use the "Flip vertically" checkbox, or apply `transform: scaleY(-1)` in CSS.

What's layered?

Multiple translucent waves stacked for depth. Used by Stripe, Airtable, etc.

Free?

Yes.