CSS Showcase · Live Demo

Dividers that fade.

Separators ranging from a plain hr hairline to gradient-faded labelled rules, vertical column dividers, and inset list separators.

Featured demo

mobile · inset
Notifications
Privacy
Appearance
Account

mobile design patterns

divider-inset.css
/* Inset list dividers */
.divider-inset-list .row {
  border-bottom: 1px solid hsl(var(--border));
}

.divider-inset-list .row:last-child {
  border-bottom: 0;
}

.divider-inset-list .row .content {
  margin-inline-start: 2rem; /* inset past the leading icon */
}

CSS features used

  • • ::before / ::after pseudo-lines
  • • linear-gradient fades
  • • flexbox align-self: stretch
  • • border-bottom lists
  • • margin-inline-start inset
  • • Semantic tokens