Dark mode divider

Quick implementation

/* HTML: <div class="divider" role="separator"><div class="divider-line"></div><div class="divider-icon">...</div><div class="divider-line"></div></div> */

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%
  );
  opacity: 0.6;
}

.divider-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  filter: drop-shadow(0 0 0.5rem var(--accent));
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building modern UI components.

Goal: Create a stylish section divider for dark mode interfaces — gradient lines with a central icon and subtle glow.

Technical constraints:
- Use flexbox with two gradient lines on either side of a central icon.
- Gradient: transparent → accent color → transparent using oklch() colors.
- Add drop-shadow filter to the icon for a glow effect.
- Use var(--accent) for the accent color to support theme customization.
- Include role="separator" and aria-label for accessibility.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept `icon` (SVG element), `className`, and `accentColor` props.

Edge cases to handle:
- Reduce motion: disable any animations if present, keep static gradient.
- Low contrast: ensure the divider is visible on dark backgrounds (check against var(--card)).
- Screen readers: the divider should be decorative, use aria-hidden on the icon, role="separator" on container.

Return HTML + CSS with clear comments.

Why this matters in 2026

Section dividers evolved from boring horizontal rules to design elements that reinforce brand identity. Instead of static <hr> or flat borders, modern dividers use gradients and subtle effects to create visual interest without heavy imagery. The gradient-from-accent approach ties directly into your design system, making the divider feel intentional rather than generic.

And because this is pure CSS, it works everywhere — no JavaScript dependencies, no webfont requirements, just clean, semantic markup with a gradient.

The logic

The divider uses flexbox to arrange two .divider-line elements flanking a central icon. Each line has a linear-gradient(90deg, transparent, var(--accent), transparent) that creates a soft fade-in/out effect. The opacity: 0.6 keeps it subtle. The icon gets a drop-shadow filter that adds a glow matching the accent color — this is more performant than box-shadow because it doesn't trigger layout.

Why two lines? Splitting the divider lets you center any icon or text while maintaining visual balance. The gradient ensures the line doesn't feel harsh at the edges.

Accessibility & performance

Dividers are decorative, so use role="separator" to communicate their purpose to assistive technologies. The icon itself should have aria-hidden="true" since it's purely visual. For performance, drop-shadow is GPU-accelerated in modern browsers, but on very old devices it may trigger CPU compositing. If you need a fallback, remove the filter and rely on the accent color alone.