SVG Divider Generator

SVG section dividers: the modern alternative to <hr>

A divider (or section separator) is the visual transition between two sections of a landing page — typically a curve, wave, slant or zigzag that bridges a coloured hero into the next white block. Before SVG, the only sane way to make one was to slice a PNG in Photoshop and serve it as a background-image; today an SVG path delivers a sharp, infinitely scalable shape in under 2 KB. This generator emits the markup you can paste directly above or below any section.

The recipe is always the same: a <svg> with viewBox="0 0 1440 100" (or 1920×100 for ultra-wide), preserveAspectRatio="none" so it stretches edge-to-edge, plus a single <path> filled with the colour of the following section. Drop the SVG with width:100vw; display:block; and the curve marries the two backgrounds seamlessly.

Divider styles and when to use them

• Wave — smooth Bezier curve; signals friendliness, used by SaaS marketing pages (Stripe, Linear).
• Curve / arc — a simple semicircle; clean, neutral, works under hero sections.
• Triangle — sharp polygon; bold, technical, fits dev-tool landing pages.
• Slant / diagonal — a single straight cut at an angle; minimal, modern, easy to layer.
• Zigzag — multiple linear segments; playful, retro, common on kids' product pages.
• Dotted / dashed line — for inline separators inside content, not between sections.
• Ornamental vignette — typographic flourishes (❦ ❧ ✦) for editorial layouts.
• Gradient fade — soft transition without a shape; built with <linearGradient> inside the SVG.

Layered dividers for depth

Stack two or three paths with slight offsets and decreasing opacity (e.g. 100%, 60%, 30%) to get the depth-of-field effect popular in 2020+ marketing pages. Each layer can have a slightly different curve so they don't overlap perfectly — a wavy "front" wave at full opacity sits in front of a softer "back" wave at 40%.

Flipping and inverting

To reuse the same path on top and bottom of a section, apply transform="rotate(180)" on the whole SVG, or flip vertically with transform="scale(1, -1)" on the <path>. Mirroring horizontally with scale(-1, 1) breaks the asymmetry that makes hand-drawn waves feel less artificial when used twice.

SVG vs CSS clip-path vs background gradients

SVG paths handle organic curves and any irregular shape — the only choice for waves. CSS clip-path: polygon(...) is great for triangles and slants without needing markup, but cannot do smooth curves. Linear-gradient backgrounds can fake stripes, fades and very basic geometric patterns but won't trim the section edges. Use SVG for everything curved, CSS for trivial polygons, gradients for soft transitions.

Design eras

Around 2018-2021 the "blob design" trend pushed smooth, exaggerated curves everywhere (Mailchimp, Slack, early Notion). Since 2022 a brutalist counter-trend swapped them for chunky, hard-edged dividers with no anti-aliasing — sharp triangles, blocky steps, abrupt slants. Match the style to your brand voice: friendly product → wave; tooling/devtools → triangle or slant; editorial → ornamental vignette.

Specialised tools you'll see online

shapedivider.app popularised the visual builder; getwaves.io focuses on waves with a "complexity" slider; Wickedly Simple Section Dividers, GenerateUI and Haikei offer wider catalogues including blobs, mesh gradients and noise. This generator covers the four shapes you'll actually need 95% of the time.

FAQ

How heavy are these SVGs? Under 2 KB uncompressed — a wave is roughly a hundred characters of path data. Gzip brings them under 500 bytes. They cost nothing compared to a raster image of the same width.

Are they responsive? Yes. With viewBox + preserveAspectRatio="none" the path stretches to any width. On very tall mobile screens you may want to scale the height with height: clamp(40px, 8vw, 100px) to keep the curve proportional.

Can I combine a divider with a gradient fill? Yes — define a <linearGradient> inside <defs> and set fill="url(#myGradient)" on the path. Animate the gradient with CSS or SMIL for a subtle moving banner.

Are dividers an accessibility problem? They are purely decorative; add aria-hidden="true" and role="presentation" so screen readers skip them.