Shapes & Dividers

What are shape dividers?

Shape dividers are decorative edges between page sections: waves, curves, slants, zigzags, tilts and layered mountain shapes that replace a straight horizontal line. This category also includes decorative shapes such as blobs, circles and geometric accents. They are used on landing pages, marketing sites and portfolios to make transitions between coloured sections feel smoother and less boxy.

When to use SVG section dividers

Use a divider when two adjacent sections have different background colours and you want a softer or more dynamic break. One style repeated consistently looks intentional; mixing many shapes on a single page looks busy.

Best practices for SVG wave dividers and CSS shapes:

• Use inline SVG with preserveAspectRatio="none" and width: 100% so the shape stretches across any screen width.
• Fill the SVG with currentColor or a CSS custom property so it matches the next section's background and adapts to themes.
• Mark decorative SVGs with aria-hidden="true" and focusable="false".
• Set an explicit height and reduce it on small screens so waves do not become too tall.
• For simple angles, clip-path: polygon() is a lightweight alternative that needs no extra markup.
• Make sure content does not overlap the shape, and check that text inside clipped sections is not cut off.
• Avoid a hairline gap between the shape and the section by nudging it with a negative margin of one pixel.

Bootstrap, Tailwind CSS and pure CSS dividers

Each shape and divider has a live preview and code tabs. Most are SVG plus a few lines of CSS, so they fit any stack. Bootstrap 6 versions use the new alpha ES module build and theme-* colour roles so fills follow light and dark themes, Bootstrap 5 versions work with background utilities, Tailwind CSS versions use fill- and text- utilities, and pure CSS versions use custom properties. Use the framework filter, copy or download the code and change colours and height.