Section Divider Generator

Create beautiful wave, curve, and geometric section dividers for your website.

Divider Settings

Style

Type

Thickness1px

Width100%

Color

Gap0px

Preview

Content above divider

Content below divider

Generated CSS & HTML

.divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 20px 0;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Divider Generator?

Create horizontal and vertical CSS dividers - lines, dots, gradients, and decorative separators. Copy the CSS and HTML markup.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Divider Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Choose divider style

Select from line, gradient fade, dotted, dashed, or text-label styles. Each style shows a live preview immediately.

Adjust colour and thickness

Set the line colour, opacity, and thickness. For gradient styles, set start and end colours.

Copy CSS and HTML

Click Copy to grab both the CSS rules and the HTML markup. Use an hr for semantic separators.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Simple line divider */
.divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 32px 0;
}

/* Gradient fade divider */
.divider-gradient {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #6C2EF5 50%,
    transparent
  );
  margin: 32px 0;
}

/* Text label divider */
.divider-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 0.875rem;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

Use an hr element for semantic separators. Use a div with role="separator" for decorative dividers.

Pro tips

Pro tips for better results

★

Use hr for semantic section separators

The hr element has semantic meaning as a thematic break in content. Style it with CSS. Use a div only for decorative dividers that have no semantic purpose.

★

Gradient dividers create visual depth

A divider that fades at the edges (transparent to colour to transparent) looks lighter and more modern than a hard solid line.

★

Avoid using margin for divider spacing

Set margin directly on the hr or divider element rather than using padding on the surrounding sections. This keeps spacing intent clear in the CSS.

FAQ

Frequently asked questions

The hr element represents a thematic break between sections of content - a meaningful topic change. A div with CSS is purely visual decoration. Screen readers announce hr as a separator. Use hr for content-related breaks, div for pure styling.

No. Everything runs in your browser. Nothing is sent to a server.