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.