Skip to content
Musterli
Support
CSS effects and layouts

Section Divider Generator (SVG Shape Dividers)

Waves, arcs, slants, peaks and more as the transition between two website sections. One SVG that fits any width, with HTML and CSS to copy.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Section Divider Generator

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A section divider is the edge between two parts of a website, for example a wave between the hero and the content. Instead of a straight line you get a soft or bold transition. The divider is a small SVG that adapts to every screen width.

What you can use it for

  • Header and hero

    A wave or an arc at the bottom of the hero leads the eye softly into the content.

  • Landing pages

    Alternating section colors feel livelier with slants or peaks than with straight edges.

  • Site builders and CMS

    The SVG fits into any HTML block, for example in WordPress, Webflow or Framer, and needs no script.

How it works

Pick a shape such as wave, arc, slant or peaks and set the count and layers. The shape color is the color of the next section. Position, mirror and invert set where the divider sits. Then copy the HTML example or the Tailwind classes, or download SVG and PNG.

Try the Section Divider Generator now

Tips

  • Use exactly the background color of the next section as the shape color. The transition then looks seamless.
  • Two or three layers add depth. The back layers are lighter and peek out behind the front one.
  • The code places the divider one pixel over the edge. That hides a thin gap that browser rounding can leave.

FAQ

How does the divider adapt to the width?
The SVG has preserveAspectRatio="none". It stretches to any width and CSS sets the height. In the code, clamp() lets the height grow with the width, between a smallest height and the height of your design.
Do I need JavaScript?
No. The divider is plain SVG with a few lines of CSS. It loads instantly and works in every browser.
Is the divider accessible?
Yes. It is pure decoration, so aria-hidden hides it from screen readers. It cannot take focus and does not block clicks.
How do I put the divider at the top of a section?
Set the position to top. The shape then points down and the code places the divider at the top edge. Invert fills the other side of the edge with the color.

Related generators

All generators in CSS effects and layouts