Divider Generator
Create solid, dashed, dotted and gradient dividers, with an optional centred label. Copy the CSS and HTML.
.divider { border: none; border-top: 1px solid #232836; }What the divider generator does
A divider is a small thing that reveals whether an interface was designed or assembled. A default hr sits heavy and grey; a hairline in the border colour, or a gradient that fades at both ends, reads as intentional.
The labelled variant, with a word like OR sitting in a gap in the line, is built from a flex container and two pseudo-elements rather than a real hr.
Using the tool
- 1Choose the style. Gradient fades at both ends, which suits wide layouts.
- 2Set the thickness and the colour.
- 3Turn on the centre label if you need an OR divider.
- 4Copy the CSS and HTML.
Common questions
Should I use hr or a div?
Use hr when it marks a genuine thematic break, since it carries meaning for screen readers. Use a div when it is purely decorative.
How does the centred label work?
The container is a flex row and the two pseudo-elements grow to fill the space either side of the text, so the line appears to break around the label.
Why does a gradient divider look better?
Because it fades at the ends instead of stopping abruptly, which stops the line from cutting the layout in half so hard.