OneTaskBy Tim King · Updated
CSS Divider Generator
CSS Section Dividers Between Two Coloured Blocks, Slant, Triangle, Notch, Curve or Wave
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Divider Generator works
This CSS divider generator builds a section edge in pure CSS. A divider is the strip where one page section hands over to the next. A straight edge is the default; a slant, a curve, a zigzag or a wave makes the join feel designed. This tool builds that strip as a single element painted in the colour of the section above, so the transition needs no image and scales with the page width.
How the CSS divider generator works
The generated code assumes two stacked sections, and places a .divider element at the top of the
lower one. The divider is filled with the colour of the section above and shaped so that its lower
edge is the divider line; whatever it does not cover shows the lower section's background. That
arrangement works for any shape because the shape only ever has to describe one edge. A
margin-top: -1px overlaps the divider with the section above by a pixel so no hairline gap appears
at sub-pixel widths.
Clip-path dividers. Slant, slant-left, triangle and notch are clip-path: polygon() values with
percentage coordinates. A slant is a triangle covering the top-right or top-left half of the strip; a
centred triangle points down from the middle; a notch is the reverse, a V cut into the divider with
the point rising to 30% of the height. Percentages mean the shape stretches with the width, so a
slant gets shallower on wide screens and steeper on phones — adjust the height per breakpoint if that
matters.
Curve. The curve is border-radius with the slash syntax: horizontal radii of 50% and vertical
radii of 100% on the bottom corners turn the rectangle's lower edge into a single elliptical arc.
Unlike clip-path, a radius keeps the element's box-shadow, so a soft shadow under the curve is one
extra declaration.
Zigzag. Two 45° linear gradients, each painting a triangle of the lower colour in one corner of a square tile, repeat horizontally across the strip over the upper colour. The tile size equals the divider height, so the teeth get larger as the height increases. Because the teeth are gradients, the edge is anti-aliased but not perfectly crisp at very large sizes.
Wave. The wave is a small inline SVG data URI, a single cubic-Bézier path across a 1440-unit
viewBox stretched to the strip with preserveAspectRatio='none'. It is the only style that needs a
data URI, and the # in the colour is percent-encoded for that reason. The dedicated wave generator
on this site offers more control over wave count and amplitude.
Colours. The upper colour must match the section above exactly — including any gradient. If the section above has a gradient, flip the approach: put the divider at the bottom of that section, painted in the solid colour of the section below, and invert the shape.
Content. The divider is decorative and has no content. Give the lower section enough top padding that its heading does not sit under the strip, or let the strip be part of the section's own padding zone.
FAQ
Why is there a thin line between the divider and the section above?
Sub-pixel rounding at fractional viewport widths. The generated rule already includes margin-top: -1px to overlap by a pixel; if the seam persists, increase to -2px or ensure both elements share
the same parent with no gap between them.
Can I put the divider at the bottom of a section instead?
Yes. Move the element to the end of the upper section, paint it in the lower section's colour and
mirror the shape vertically: swap the 0 and 100% y-coordinates in the polygon, move the
border-radius to the top corners, or add transform: scaleY(-1) to the wave and zigzag.
Does clip-path affect the section's layout or content?
No. The divider is its own element with a fixed height, so it takes exactly that much vertical space and the rest of the section flows normally beneath it. Nothing else is clipped.
How do I make the slant steeper on desktop?
Percentages scale with width, so the same polygon is shallower on a wide screen. Increase the divider
height at a desktop breakpoint, or use vw units for the height so it grows in proportion with the
viewport width.
Can I animate the divider?
A wave or zigzag can drift sideways by animating background-position-x. Clip-path polygons can be
transitioned between two values with the same point count, so a slant can ease into a triangle on
hover or scroll.
See also: all Shapes & SVG tools, Layout & Spacing, Shadows & Motion, UI Components, Forms & Inputs, Colour.
Related tools
CSS Wave Generator
Wavy section edges from an inline SVG path, copied as CSS.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.
CSS Pattern Generator
Repeating background patterns built from CSS gradients, no images.
Form Progress Bar
Step indicators and progress bars for multi-step forms and checkouts.
Torn Paper Edge
A ripped, jagged paper edge on a card or section.