CSS section dividers

A horizontal hairline that fades in from both ends with an indigo-to-pink gradient — elegant for section breaks.

A row of evenly-spaced amber dots forming a soft wavy line — playful and lightweight.

A green dashed line whose segments appear to march continuously to the right via background-position animation.

Fading ocean gradient divider line (thin thickness), shown between two text blocks.

Fading ocean gradient divider line (med thickness), shown between two text blocks.

Fading ocean gradient divider line (thick thickness), shown between two text blocks.

Full-width dashed blue divider with a labeled section break.

Full-width dotted blue divider with a labeled section break.

Three-segment divider with end dots using the ocean palette.

The "or continue with" rule: blue lines fading out from a centered label.

Hairline rule with an ocean light packet running along it — a section break with a pulse.

Flexbox "or" divider whose rules fade out from an ocean center — no fixed widths.

A rule interrupted by a rotated chevron, punched out of the line with a solid box-shadow rather than a background swatch that has to match.

Two hairlines bracketing a glowing node, spaced far enough apart to read as a deliberate seam rather than a doubled border.

Scalloped seam cut by two offset radial repeats, so the notches interlock into a torn edge rather than a row of even semicircles.

Column separator whose label runs with the rule via `writing-mode`, so the text rotates without a transform that would break its box.

Section rule broken by a ringed medallion, the inner diamond rotated so the ornament reads as deliberate rather than as a dot.

Two bands with mirrored diagonal cuts meeting on one line, so the seam between sections is an angle rather than a horizontal rule.

Sawtooth rule cut with a repeating conic mask rather than drawn as triangles, so the tooth pitch is one background-size value and widens on hover.

Three lozenges at the centre of a pair of rules that taper into the surface, the middle one turning half a revolution on hover while the flankers hold still.

Sine edge assembled from two alternating circle masks rather than an SVG path, the pair scrolling one full period so the crests travel without the band moving.

Saddle-stitch seam: a dashed rule offset by a coloured drop-shadow so each stitch appears to sit proud of the surface, shifting half a stitch on hover.

A directional divider that starts from a glowing sky dot and ends in a solid arrowhead.

Emerald rings strung evenly along a thin rule, like links on a chain.