CSS divider generator
Generate nine kinds of CSS dividers — solid, dashed, dotted, double, gradient, titled, wave, diagonal stripes and icon — with configurable color, thickness, width and spacing, plus a live preview and CSS/HTML output.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Live preview
The preview renders the generated HTML and CSS, exactly what you will paste
Presets
Click a preset to apply it
CSS code
.divider {
width: 100%;
margin: 24px 0 24px;
border: 0;
border-top: 2px solid #94A3B8;
}<hr class="uk-divider-preview" />
What this tool does
- Build the "or continue with" style divider: the lines on both sides of the label are drawn automatically, no flex maths required.
- Add a consistent rule between form sections, cards or list items — colour, thickness, width and spacing are all tuned before you copy.
- Get decorative separators such as wave or diagonal stripes as generated gradients, with no image assets or SVG needed.
- Compare nine types (solid, dashed, dotted, double, gradient, titled, wave, stripes, icon) and pick the one that matches your page.
Example
Input
Type "Titled": line colour #94A3B8, thickness 2px, width 100%, spacing 24px above and below, label "or", label background #FFFFFF
Output
.divider {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 24px 0 24px;
color: #94A3B8;
font-size: 14px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
border-top: 2px solid #94A3B8;
}
.divider span {
background: #FFFFFF;
padding: 0 4px;
}The titled and icon types use a div with ::before / ::after; every other type is a plain <hr>. The label background must match the page background to hide the line behind it.
Frequently asked questions
Why does a titled divider need a label background colour?
The lines on each side come from ::before and ::after, so without a background the rule shows through behind the text. Setting the label background to the surrounding colour makes the line appear to stop at the label.
Why is the width a percentage?
Width is relative to the parent and accepts 5%–100%, so the same CSS adapts to a narrow sidebar and a wide article. For a fixed size, change the generated width value to px.
Are the wave and stripe dividers real images?
No — they are background patterns built from radial-gradient and repeating-linear-gradient: the wave tiles a circle with repeat-x and the stripes use a 45° repeating gradient, so both follow your colour and thickness.
What happens if a value is out of range?
Thickness must be 1–40px, width 5%–100% and spacing 0–160px; anything outside that (or a non-numeric value) shows an error instead of code. Colours must be #RGB, #RGBA, #RRGGBB or #RRGGBBAA.
Is the code uploaded anywhere?
No. The CSS and HTML are assembled from strings in your browser, the page makes no network requests, and it works offline.
Keywords：cssdividerseparatorhr分割线分隔线标题分割线波浪线斜纹样式生成器