CSS Dividers & Separators Effects

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.

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.

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.

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.

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.

Dashed cut-here rule interrupted by a pair of scissors whose blades open a little wider when the divider is hovered.

The hairline sitting in the gap between two blocks turns into a working control when you reach for it: the rule goes blue and dashed, a plus button springs up at its left end and an Insert block label slides out from behind it.

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

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.

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.

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.

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

Separator built as a crease in the surface, shadow gathering above the fold and a thin catch of light below it.

The separator holding an editor and its preview apart is a working splitter: reaching for the nine-pixel channel lights it blue, stretches its three grip dots and pushes a pair of arrowheads out into each pane to say which way it drags.

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

A section that ends in a row of scalloped half-circles trimmed with a rose edge.

Hairline rule graduated with minor ticks every ten pixels and a taller major tick every fifty, like the edge of a ruler.

A separator that is not an element at all: text flowing through a two-column layout is split by its own column-rule down the gutter, pinned at the middle by a small diamond node that turns and lights up with the rule on hover.

A rule that thickens and brightens toward a glowing amber head, like a comet streaking across the page.

Section rule drawn as a barcode of four bar widths on incommensurate spacings, faded out at both ends by a mask.

Section separator drawn as a merge in a commit graph: two coloured branch lines drop from their labelled tips, curve inward through rounded elbows and join at a pulsing node before continuing as a single grey trunk below.

A rounded cord of alternating diagonal orange strands that reads as a twisted rope.

Editorial divider with a bold lime section number, a rule that fades away, and a small caps label at the end.