dividersbeginner

Gradient Divider

Horizontal divider with fading gradient edges.

Preview

Tailwind Classes

h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent

CSS Code

.gradient-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #d1d5db, transparent);
}

HTML Example

<div class="py-8">
  <div class="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
</div>

Use Cases

Section separatorsContent breaksList dividersCard separators

Browser Support

All modern browsers

#divider#separator#gradient#line