divgradient-dividerbeginner

Gradient Divider

A horizontal divider line with a gradient from transparent to color and back, creating a fade effect.

Preview

<div class="max-w-2xl mx-auto py-8">
  <div class="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
</div>
<div class="max-w-2xl mx-auto py-8">
  <div class="h-0.5 bg-gradient-to-r from-transparent via-indigo-500 to-transparent"></div>
</div>

Color Breakdown

Subtle Divider

via-gray-300

#d1d5db

Color Divider

via-indigo-500

#6366f1

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:via-gray-700 dark:via-indigo-400

Use Cases

Section separatorsContent breaksDecorative dividers

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Gradient Hero Section

section - beginner

CTA Banner

section - beginner

Gradient Footer

section - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Frequently Asked Questions

How do I make a vertical divider?▼

Change h-px to w-px h-full and change bg-gradient-to-r to bg-gradient-to-b.