Taildev

bg-gradient-to-r

Create stunning horizontal gradients that flow from left to right. Perfect for buttons, headers, and modern UI elements that need dynamic visual appeal.

Left to Right Gradient

Left → Right
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  Left to Right Gradient
</div>

How it Works

  • • bg-gradient-to-r sets direction to right
  • • from-blue-500 defines starting color
  • • to-purple-500 defines ending color
  • • Creates smooth horizontal transition

Popular Color Combinations

Ocean
from-cyan-500 to-blue-500
Sunset
from-orange-500 to-red-500
Forest
from-green-500 to-emerald-500
Purple Haze
from-purple-500 to-pink-500
Golden
from-yellow-500 to-orange-500
Midnight
from-indigo-500 to-purple-500

Three Color Gradients

Rainbow Effect

Red → Yellow → Blue
from-red-500 via-yellow-500 to-blue-500

Tropical Vibes

Green → Teal → Blue
from-green-500 via-teal-500 to-blue-500

Interactive UI Examples

Gradient Button

bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600

Card Header

Dashboard

Card content goes here

bg-gradient-to-r from-green-500 to-teal-500

Progress Bar

75% Complete

bg-gradient-to-r from-purple-500 to-pink-500

Gradient Text Effects

Amazing Gradient

bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent

Vibrant Colors

bg-gradient-to-r from-pink-400 via-red-400 to-yellow-400 bg-clip-text text-transparent

Best Practices

✅ Do

  • • Use similar color temperatures for harmony
  • • Test readability with white and dark text
  • • Consider accessibility and contrast ratios
  • • Use hover states for interactive elements
  • • Keep gradients subtle for backgrounds
  • • Use brand colors for consistency

❌ Don't

  • • Mix too many contrasting colors
  • • Use gradients on small text
  • • Overuse gradients throughout the design
  • • Ignore mobile performance impact
  • • Use gradients that hurt readability
  • • Forget to test in different browsers