Section Dividers

SVG edge transitions placed between sections. The color prop matches the background of the section below.

type="wave" Smooth, organic. Good default choice.

Dark section above

White section below

type="torn" Ripped paper edge. Like Jobber.

Dark section above

Cream section below

type="rough" Organic rough edge. Softer than torn.

Primary section above

White section below

type="angle" Clean diagonal cut. Modern feel.

Dark section above

Light gray section below

type="curve" Big smooth arc. Dramatic.

Dark section above

White section below

type="zigzag" Triangular points. Bold and geometric.

Primary section above

White section below

type="torn" flip=true Flipped - place at the TOP of a dark section.

White section above

Dark section below - divider at the top

Background Patterns

CSS utility classes for subtle texture. Add to any section's class list. Works on light and dark backgrounds.

.pattern-dots

Light Background

.pattern-dots

Dark Background

.pattern-grid

Light Background

.pattern-grid

Dark Background

.pattern-diagonal

Light Background

.pattern-diagonal

Dark Background

.pattern-topography

Light Background

.pattern-topography

Dark Background

.pattern-waves

Light Background

.pattern-waves

Dark Background

.pattern-zigzag

Light Background

.pattern-zigzag

Dark Background

.pattern-diamonds

Light Background

.pattern-diamonds

Dark Background

.pattern-crosses

Light Background

.pattern-crosses

Dark Background

.pattern-circuit

Light Background

.pattern-circuit

Dark Background

.pattern-hexagons

Light Background

.pattern-hexagons

Dark Background

.pattern-noise

Grainy / Paper texture

.pattern-noise

Dark + Noise

Combined Example

Dividers + patterns used together between sections.

White section with dots pattern

Some content here

Dark section with topo pattern

Torn paper transition into this

Cream section with noise texture

Wave transition into this