Section divider. 6 styles (solid · dashed · dotted · gradient · text · double).
➖ Preview
— Content above —
— Content below —

How to use

  1. Pick divider type (6 styles).
  2. Adjust thickness, margin, width.
  3. Set colors (gradient endpoints if used).
  4. Optional text (OR, ★, etc.).
  5. Copy HTML+CSS.

Key features

  • 6 divider styles (solid / dashed / dotted / gradient / text / double)
  • Thickness 1–20 px, margin 0–120 px
  • Width 20–100% (auto-centered)
  • Gradient fade for soft edges
  • Center text/icon option (OR, ★, ❤)

Use cases

  • Website section divides — Hero ↔ Features
  • Blog body — chapter breaks
  • Login forms — "OR" between email and social
  • Email footers — content/footer split
  • Product cards — group separators

Divider design tips

(1) 60–80% width looks most natural; 100% can feel heavy. (2) Use ~30% brightness of body text — too dark blocks the eye. `#cbd5e1` is a safe gray. (3) Gradient fade softens both ends for a modern feel. (4) "OR" text divider is the standard for forms.

FAQ

Should I use hr?

For semantic section breaks, `<hr>` is best for SEO and a11y. For pure decoration, `<div>` is fine.

Dark-mode support?

Use CSS variables: `--divider: rgba(255,255,255,0.1)` for dark, `rgba(0,0,0,0.1)` for light.

SVG wave/zigzag dividers?

This is for simple dividers. Try the wave-pattern or action-lines tool for shaped dividers.

Free?

Yes.