Tailwind UI Pattern Registry for humans and agents

dashed line divider separator gradient border mask timeline connector lines section dividers with controlled dash pattern decorative vertical/horizontal separators stepper progress connectors border-dashed has inconsistent rendering across browsers need custom dash length and gap control want fading dashed lines for decorative separators

Dashed Line

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/dashed-line.json
Format
Preview
Stage Background
Customize

Quick Start

<div class="dashed-line-v h-full"></div>

Details

Tailwind
v4.x
Browser
baseline-2024
Size
1863 bytes · 63 lines
Custom Properties
--dash-color--dash-length--dash-gap--dash-width
Classes
.dashed-line-v.dashed-line-h.dashed-line-fade-v.dashed-line-fade-h
dashed line divider separator gradient border mask

Dashed lines via repeating-linear-gradient — gives you exact control over dash length, gap, and color that border-dashed can’t. Four variants: vertical, horizontal, and fade-out versions of each (using mask-image to dissolve at the ends).

Vertical connector

<div class="relative flex gap-6">
  <div class="dashed-line-v absolute left-5 top-12 h-[calc(100%-3rem)]"></div>
  <div class="relative z-10 h-10 w-10 rounded-full bg-indigo-600"></div>
  <div class="pt-2">Step 1: Configure</div>
</div>

Horizontal divider

<div class="dashed-line-h w-full" style="--dash-length: 8px; --dash-gap: 6px;"></div>

Fading vertical (decorative)

<div class="dashed-line-fade-v h-64 mx-auto"
     style="--dash-color: oklch(0.6 0.1 250); --dash-length: 3px; --dash-gap: 3px;">
</div>

Section separator with fade

<div class="dashed-line-fade-h mx-auto w-3/4" style="--dash-color: oklch(0.7 0.005 75);"></div>